From f12cbaadeb790cc41204100ff0561fbbedd117bc Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Wed, 18 Aug 2021 17:08:25 +0200
Subject: [PATCH] Use font icons instead of svg.

---
 assets/icons/arrow_down.svg                   |  38 ++++++
 assets/icons/arrow_right.svg                  |  33 ++++++
 assets/icons/arrow_up.svg                     |  38 ++++++
 assets/icons/close.svg                        |  38 ++++++
 .../context => assets/icons}/deisolate.svg    |   0
 .../toolbar => assets/icons}/details.svg      |   0
 .../images/header => assets/icons}/donate.svg |   0
 .../toolbar => assets/icons}/export.svg       |   0
 .../header => assets/icons}/feedback.svg      |   0
 assets/icons/file_download.svg                |  38 ++++++
 .../navigator => assets/icons}/files.svg      |   0
 .../images/context => assets/icons}/fit.svg   |   0
 .../toolbar => assets/icons}/fix_up_off.svg   |   0
 .../toolbar => assets/icons}/fix_up_on.svg    |   0
 .../images/toolbar => assets/icons}/flip.svg  |   0
 .../images/header => assets/icons}/github.svg |   0
 assets/icons/hidden.svg                       |  38 ++++++
 .../images/header => assets/icons}/info.svg   |   0
 .../context => assets/icons}/isolate.svg      |   0
 .../navigator => assets/icons}/materials.svg  |   0
 .../navigator => assets/icons}/meshes.svg     |   0
 .../icons}/missing_files.svg                  |   0
 .../navigator => assets/icons}/model.svg      |   0
 .../images/toolbar => assets/icons}/open.svg  |   0
 .../toolbar => assets/icons}/open_url.svg     |   0
 .../toolbar => assets/icons}/settings.svg     |   0
 .../images/toolbar => assets/icons}/share.svg |   0
 .../images/toolbar => assets/icons}/up_y.svg  |   0
 .../images/toolbar => assets/icons}/up_z.svg  |   0
 assets/icons/visible.svg                      |  48 ++++++++
 assets/icons/warning.svg                      |  49 ++++++++
 package.json                                  |   2 +
 tools/build.py                                |   1 +
 tools/config.json                             |   1 +
 tools/lib/tools_lib.py                        |   5 +
 tools/svg.py                                  |  39 ++++++-
 website/assets/images/context/hide.svg        |   1 -
 website/assets/images/context/show.svg        |   1 -
 website/assets/images/dialog/arrow_down.svg   |   1 -
 .../assets/images/dialog/file_download.svg    |   1 -
 website/assets/images/header/donate_hover.svg |   1 -
 .../assets/images/header/feedback_hover.svg   |   1 -
 website/assets/images/header/github_hover.svg |   1 -
 website/assets/images/header/info_hover.svg   |   1 -
 .../assets/images/navigator/arrow_down.svg    |   1 -
 .../assets/images/navigator/arrow_right.svg   |   1 -
 website/assets/images/navigator/arrow_up.svg  |   1 -
 .../assets/images/navigator/fit_navigator.svg |   1 -
 website/assets/images/navigator/hidden.svg    |   1 -
 website/assets/images/navigator/open.svg      |   1 -
 website/assets/images/navigator/visible.svg   |   1 -
 website/assets/images/sidebar/close.svg       |   1 -
 website/assets/images/sidebar/warning.svg     |   1 -
 .../assets/images/toolbar/details_active.svg  |   1 -
 website/assets/images/toolbar/fit.svg         |   1 -
 .../assets/images/toolbar/settings_active.svg |   1 -
 website/embed.html                            |   1 +
 website/index.html                            |   1 +
 website/info/index.html                       |  17 ++-
 website/info/info.css                         |  19 ++-
 website/o3dv/css/O3DVIcons/O3DVIcons.woff     | Bin 0 -> 5924 bytes
 website/o3dv/css/controls.css                 |  13 ++-
 website/o3dv/css/core.css                     |   1 +
 website/o3dv/css/dialogs.css                  |   7 ++
 website/o3dv/css/icons.css                    | 109 ++++++++++++++++++
 website/o3dv/css/treeview.css                 |   5 +-
 website/o3dv/css/website.css                  |  18 +--
 website/o3dv/js/exportdialog.js               |   2 +-
 website/o3dv/js/modeldata.js                  |   8 +-
 website/o3dv/js/navigator.js                  |  12 +-
 website/o3dv/js/sidebarpanel.js               |   2 +-
 website/o3dv/js/toolbar.js                    |  24 ++--
 website/o3dv/js/treeview.js                   |  12 +-
 website/o3dv/js/utils.js                      |  32 +++--
 website/o3dv/js/website.js                    |  24 ++--
 75 files changed, 591 insertions(+), 104 deletions(-)
 create mode 100644 assets/icons/arrow_down.svg
 create mode 100644 assets/icons/arrow_right.svg
 create mode 100644 assets/icons/arrow_up.svg
 create mode 100644 assets/icons/close.svg
 rename {website/assets/images/context => assets/icons}/deisolate.svg (100%)
 rename {website/assets/images/toolbar => assets/icons}/details.svg (100%)
 rename {website/assets/images/header => assets/icons}/donate.svg (100%)
 rename {website/assets/images/toolbar => assets/icons}/export.svg (100%)
 rename {website/assets/images/header => assets/icons}/feedback.svg (100%)
 create mode 100644 assets/icons/file_download.svg
 rename {website/assets/images/navigator => assets/icons}/files.svg (100%)
 rename {website/assets/images/context => assets/icons}/fit.svg (100%)
 rename {website/assets/images/toolbar => assets/icons}/fix_up_off.svg (100%)
 rename {website/assets/images/toolbar => assets/icons}/fix_up_on.svg (100%)
 rename {website/assets/images/toolbar => assets/icons}/flip.svg (100%)
 rename {website/assets/images/header => assets/icons}/github.svg (100%)
 create mode 100644 assets/icons/hidden.svg
 rename {website/assets/images/header => assets/icons}/info.svg (100%)
 rename {website/assets/images/context => assets/icons}/isolate.svg (100%)
 rename {website/assets/images/navigator => assets/icons}/materials.svg (100%)
 rename {website/assets/images/navigator => assets/icons}/meshes.svg (100%)
 rename {website/assets/images/navigator => assets/icons}/missing_files.svg (100%)
 rename {website/assets/images/navigator => assets/icons}/model.svg (100%)
 rename {website/assets/images/toolbar => assets/icons}/open.svg (100%)
 rename {website/assets/images/toolbar => assets/icons}/open_url.svg (100%)
 rename {website/assets/images/toolbar => assets/icons}/settings.svg (100%)
 rename {website/assets/images/toolbar => assets/icons}/share.svg (100%)
 rename {website/assets/images/toolbar => assets/icons}/up_y.svg (100%)
 rename {website/assets/images/toolbar => assets/icons}/up_z.svg (100%)
 create mode 100644 assets/icons/visible.svg
 create mode 100644 assets/icons/warning.svg
 delete mode 100644 website/assets/images/context/hide.svg
 delete mode 100644 website/assets/images/context/show.svg
 delete mode 100644 website/assets/images/dialog/arrow_down.svg
 delete mode 100644 website/assets/images/dialog/file_download.svg
 delete mode 100644 website/assets/images/header/donate_hover.svg
 delete mode 100644 website/assets/images/header/feedback_hover.svg
 delete mode 100644 website/assets/images/header/github_hover.svg
 delete mode 100644 website/assets/images/header/info_hover.svg
 delete mode 100644 website/assets/images/navigator/arrow_down.svg
 delete mode 100644 website/assets/images/navigator/arrow_right.svg
 delete mode 100644 website/assets/images/navigator/arrow_up.svg
 delete mode 100644 website/assets/images/navigator/fit_navigator.svg
 delete mode 100644 website/assets/images/navigator/hidden.svg
 delete mode 100644 website/assets/images/navigator/open.svg
 delete mode 100644 website/assets/images/navigator/visible.svg
 delete mode 100644 website/assets/images/sidebar/close.svg
 delete mode 100644 website/assets/images/sidebar/warning.svg
 delete mode 100644 website/assets/images/toolbar/details_active.svg
 delete mode 100644 website/assets/images/toolbar/fit.svg
 delete mode 100644 website/assets/images/toolbar/settings_active.svg
 create mode 100644 website/o3dv/css/O3DVIcons/O3DVIcons.woff
 create mode 100644 website/o3dv/css/icons.css

diff --git a/assets/icons/arrow_down.svg b/assets/icons/arrow_down.svg
new file mode 100644
index 0000000..9ac4ccc
--- /dev/null
+++ b/assets/icons/arrow_down.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 18 18"
+   xml:space="preserve"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="arrow_down.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs8" /><sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="43.277778"
+     inkscape:cx="9"
+     inkscape:cy="9"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" /><path
+     fill="none"
+     stroke="#838383"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-miterlimit="10"
+     d="m14 6.5-5 5-5-5"
+     id="path2"
+     style="stroke:#263238;stroke-opacity:1" /></svg>
diff --git a/assets/icons/arrow_right.svg b/assets/icons/arrow_right.svg
new file mode 100644
index 0000000..b6f3f63
--- /dev/null
+++ b/assets/icons/arrow_right.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 18 18"
+   xml:space="preserve"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="arrow_right.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs8" /><sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="43.277778"
+     inkscape:cx="9"
+     inkscape:cy="9"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" /><path
+     d="m6.503 14.003 5-5-5-5"
+     style="fill:none;stroke:#263238;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1"
+     id="path2" /></svg>
diff --git a/assets/icons/arrow_up.svg b/assets/icons/arrow_up.svg
new file mode 100644
index 0000000..2b8714a
--- /dev/null
+++ b/assets/icons/arrow_up.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 18 18"
+   xml:space="preserve"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="arrow_up.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs8" /><sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="43.277778"
+     inkscape:cx="9"
+     inkscape:cy="9"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" /><path
+     fill="none"
+     stroke="#838383"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-miterlimit="10"
+     d="m14 11.5-5-5-5 5"
+     id="path2"
+     style="stroke:#263238;stroke-opacity:1" /></svg>
diff --git a/assets/icons/close.svg b/assets/icons/close.svg
new file mode 100644
index 0000000..bac75c9
--- /dev/null
+++ b/assets/icons/close.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xml:space="preserve"
+   viewBox="0 0 18 18"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="close.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs8" /><sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="43.277778"
+     inkscape:cx="9"
+     inkscape:cy="9"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" /><path
+     d="m3.5 14.5 11-11m0 11-11-11"
+     stroke-miterlimit="10"
+     stroke-linejoin="round"
+     stroke-linecap="round"
+     stroke="#838383"
+     fill="none"
+     id="path2"
+     style="stroke:#263238;stroke-opacity:1" /></svg>
diff --git a/website/assets/images/context/deisolate.svg b/assets/icons/deisolate.svg
similarity index 100%
rename from website/assets/images/context/deisolate.svg
rename to assets/icons/deisolate.svg
diff --git a/website/assets/images/toolbar/details.svg b/assets/icons/details.svg
similarity index 100%
rename from website/assets/images/toolbar/details.svg
rename to assets/icons/details.svg
diff --git a/website/assets/images/header/donate.svg b/assets/icons/donate.svg
similarity index 100%
rename from website/assets/images/header/donate.svg
rename to assets/icons/donate.svg
diff --git a/website/assets/images/toolbar/export.svg b/assets/icons/export.svg
similarity index 100%
rename from website/assets/images/toolbar/export.svg
rename to assets/icons/export.svg
diff --git a/website/assets/images/header/feedback.svg b/assets/icons/feedback.svg
similarity index 100%
rename from website/assets/images/header/feedback.svg
rename to assets/icons/feedback.svg
diff --git a/assets/icons/file_download.svg b/assets/icons/file_download.svg
new file mode 100644
index 0000000..46c32e1
--- /dev/null
+++ b/assets/icons/file_download.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 18 18"
+   xml:space="preserve"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="file_download.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs8" /><sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="43.277778"
+     inkscape:cx="9"
+     inkscape:cy="9"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" /><path
+     fill="none"
+     stroke="#3393BD"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-miterlimit="10"
+     d="m6.5 9.5 3 3 3-3m-3-6v9m-6 1v1c0 .6.5 1 1.2 1h9.6c.7 0 1.2-.4 1.2-1v-1"
+     id="path2"
+     style="stroke:#263238;stroke-opacity:1" /></svg>
diff --git a/website/assets/images/navigator/files.svg b/assets/icons/files.svg
similarity index 100%
rename from website/assets/images/navigator/files.svg
rename to assets/icons/files.svg
diff --git a/website/assets/images/context/fit.svg b/assets/icons/fit.svg
similarity index 100%
rename from website/assets/images/context/fit.svg
rename to assets/icons/fit.svg
diff --git a/website/assets/images/toolbar/fix_up_off.svg b/assets/icons/fix_up_off.svg
similarity index 100%
rename from website/assets/images/toolbar/fix_up_off.svg
rename to assets/icons/fix_up_off.svg
diff --git a/website/assets/images/toolbar/fix_up_on.svg b/assets/icons/fix_up_on.svg
similarity index 100%
rename from website/assets/images/toolbar/fix_up_on.svg
rename to assets/icons/fix_up_on.svg
diff --git a/website/assets/images/toolbar/flip.svg b/assets/icons/flip.svg
similarity index 100%
rename from website/assets/images/toolbar/flip.svg
rename to assets/icons/flip.svg
diff --git a/website/assets/images/header/github.svg b/assets/icons/github.svg
similarity index 100%
rename from website/assets/images/header/github.svg
rename to assets/icons/github.svg
diff --git a/assets/icons/hidden.svg b/assets/icons/hidden.svg
new file mode 100644
index 0000000..cd4e814
--- /dev/null
+++ b/assets/icons/hidden.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 18 18"
+   xml:space="preserve"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="hidden.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs8" /><sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="43.277778"
+     inkscape:cx="9"
+     inkscape:cy="9"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" /><path
+     fill="none"
+     stroke="#838383"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-miterlimit="10"
+     d="M.5 9c6-6 11-6 17 0M.5 9c6 6 11 6 17 0m-16 6.5 15-13"
+     id="path2"
+     style="stroke:#263238;stroke-opacity:1" /></svg>
diff --git a/website/assets/images/header/info.svg b/assets/icons/info.svg
similarity index 100%
rename from website/assets/images/header/info.svg
rename to assets/icons/info.svg
diff --git a/website/assets/images/context/isolate.svg b/assets/icons/isolate.svg
similarity index 100%
rename from website/assets/images/context/isolate.svg
rename to assets/icons/isolate.svg
diff --git a/website/assets/images/navigator/materials.svg b/assets/icons/materials.svg
similarity index 100%
rename from website/assets/images/navigator/materials.svg
rename to assets/icons/materials.svg
diff --git a/website/assets/images/navigator/meshes.svg b/assets/icons/meshes.svg
similarity index 100%
rename from website/assets/images/navigator/meshes.svg
rename to assets/icons/meshes.svg
diff --git a/website/assets/images/navigator/missing_files.svg b/assets/icons/missing_files.svg
similarity index 100%
rename from website/assets/images/navigator/missing_files.svg
rename to assets/icons/missing_files.svg
diff --git a/website/assets/images/navigator/model.svg b/assets/icons/model.svg
similarity index 100%
rename from website/assets/images/navigator/model.svg
rename to assets/icons/model.svg
diff --git a/website/assets/images/toolbar/open.svg b/assets/icons/open.svg
similarity index 100%
rename from website/assets/images/toolbar/open.svg
rename to assets/icons/open.svg
diff --git a/website/assets/images/toolbar/open_url.svg b/assets/icons/open_url.svg
similarity index 100%
rename from website/assets/images/toolbar/open_url.svg
rename to assets/icons/open_url.svg
diff --git a/website/assets/images/toolbar/settings.svg b/assets/icons/settings.svg
similarity index 100%
rename from website/assets/images/toolbar/settings.svg
rename to assets/icons/settings.svg
diff --git a/website/assets/images/toolbar/share.svg b/assets/icons/share.svg
similarity index 100%
rename from website/assets/images/toolbar/share.svg
rename to assets/icons/share.svg
diff --git a/website/assets/images/toolbar/up_y.svg b/assets/icons/up_y.svg
similarity index 100%
rename from website/assets/images/toolbar/up_y.svg
rename to assets/icons/up_y.svg
diff --git a/website/assets/images/toolbar/up_z.svg b/assets/icons/up_z.svg
similarity index 100%
rename from website/assets/images/toolbar/up_z.svg
rename to assets/icons/up_z.svg
diff --git a/assets/icons/visible.svg b/assets/icons/visible.svg
new file mode 100644
index 0000000..737a2de
--- /dev/null
+++ b/assets/icons/visible.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 18 18"
+   xml:space="preserve"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="visible.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs10" /><sodipodi:namedview
+     id="namedview8"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="43.277778"
+     inkscape:cx="9"
+     inkscape:cy="9"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" /><path
+     fill="none"
+     stroke="#838383"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-miterlimit="10"
+     d="M.5 9c6-6 11-6 17 0M.5 9c6 6 11 6 17 0"
+     id="path2"
+     style="stroke:#263238;stroke-opacity:1" /><circle
+     fill="none"
+     stroke="#838383"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-miterlimit="10"
+     cx="9"
+     cy="8"
+     r="3.5"
+     id="circle4"
+     style="stroke:#263238;stroke-opacity:1" /></svg>
diff --git a/assets/icons/warning.svg b/assets/icons/warning.svg
new file mode 100644
index 0000000..0aa8ca2
--- /dev/null
+++ b/assets/icons/warning.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   id="Layer_1"
+   x="0"
+   y="0"
+   viewBox="0 0 18 18"
+   style="enable-background:new 0 0 18 18"
+   xml:space="preserve"
+   sodipodi:docname="warning.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs9" /><sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="43.277778"
+     inkscape:cx="9"
+     inkscape:cy="9"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     id="style2">.st1{fill:#fff}</style><circle
+     style="fill:none;stroke:#263238;stroke-opacity:1"
+     id="circle4"
+     cy="9"
+     cx="9"
+     r="8.5" /><path
+     class="st1"
+     d="M9 10c-.6 0-1-.4-1-1V5c0-.6.4-1 1-1s1 .4 1 1v4c0 .6-.4 1-1 1z"
+     id="path6"
+     style="fill:#263238;fill-opacity:1" /><circle
+     class="st1"
+     cx="9"
+     cy="13"
+     r="1"
+     id="circle8"
+     style="fill:#263238;fill-opacity:1" /></svg>
diff --git a/package.json b/package.json
index 6f9ae6d..49fd5c0 100644
--- a/package.json
+++ b/package.json
@@ -7,9 +7,11 @@
 	"devDependencies": {
 		"clean-css-cli": "^5.3.3",
 		"eslint": "^7.30.0",
+		"fantasticon": "^1.2.2",
 		"google-closure-compiler": "^20210302.0.0",
 		"http-server": "^0.12.3",
 		"mocha": "^8.3.2",
+		"oslllo-svg-fixer": "^1.4.0",
 		"rewire": "^5.0.0",
 		"svgo": "^2.3.1"
 	},
diff --git a/tools/build.py b/tools/build.py
index 9ebad0e..5481db2 100644
--- a/tools/build.py
+++ b/tools/build.py
@@ -61,6 +61,7 @@ def CreateDestinationDir (config, rootDir, websiteDir, version, testBuild):
 	shutil.copytree (os.path.join (rootDir, 'libs'), os.path.join (websiteDir, 'libs'))
 	shutil.copytree (os.path.join (rootDir, 'website', 'assets'), os.path.join (websiteDir, 'assets'))
 	shutil.copytree (os.path.join (rootDir, 'website', 'o3dv', 'css', 'Quicksand'), os.path.join (websiteDir, 'o3dv', 'Quicksand'))
+	shutil.copytree (os.path.join (rootDir, 'website', 'o3dv', 'css', 'O3DVIcons'), os.path.join (websiteDir, 'o3dv', 'O3DVIcons'))
 	shutil.copytree (os.path.join (rootDir, 'website', 'info'), os.path.join (websiteDir, 'info'))
 	
 	libFiles = config['lib_files']
diff --git a/tools/config.json b/tools/config.json
index 70c223c..32f5cf1 100644
--- a/tools/config.json
+++ b/tools/config.json
@@ -90,6 +90,7 @@
 		"website/o3dv/js/embed.js"
 	],
 	"website_files_css" : [
+		"website/o3dv/css/icons.css",
 		"website/o3dv/css/core.css",
 		"website/o3dv/css/controls.css",
 		"website/o3dv/css/dialogs.css",
diff --git a/tools/lib/tools_lib.py b/tools/lib/tools_lib.py
index a45c223..b7eab2d 100644
--- a/tools/lib/tools_lib.py
+++ b/tools/lib/tools_lib.py
@@ -92,6 +92,11 @@ def ReplaceInFile (filePath, begToken, endToken, newContent):
 	content = content.replace (content[begPosition : endPosition + len (endToken)], newContent)
 	WriteContentToFile (filePath, content)
 
+def ReplaceStringInFile (filePath, oldString, newString):
+	content = GetFileContent (filePath)
+	content = content.replace (oldString, newString)
+	WriteContentToFile (filePath, content)
+
 def CreateFileLinks (fileUrls, linePrefix, eolChar):
 	result = ''
 	for fileUrl in fileUrls:
diff --git a/tools/svg.py b/tools/svg.py
index 8f4bc0d..8980eb5 100644
--- a/tools/svg.py
+++ b/tools/svg.py
@@ -1,5 +1,6 @@
 import os
 import sys
+import shutil
 
 from lib import tools_lib as Tools
 
@@ -7,8 +8,44 @@ def Main (argv):
 	toolsDir = os.path.dirname (os.path.abspath (__file__))
 	rootDir = os.path.dirname (toolsDir)
 	os.chdir (rootDir)
+
+	iconsDir = os.path.join (rootDir, 'assets', 'icons')
+	tempDir = os.path.join ('build', 'temp')
+	if os.path.exists (tempDir):
+		shutil.rmtree (tempDir)
+	fixedIconsDir = os.path.join (tempDir, 'icons')
+	if not os.path.exists (fixedIconsDir):
+		os.makedirs (fixedIconsDir)
+
+	iconFontDir = os.path.join (tempDir, 'iconfont')
+	if not os.path.exists (iconFontDir):
+		os.makedirs (iconFontDir)
+
+	Tools.RunCommand ('oslllo-svg-fixer', [
+		'-s', iconsDir,
+		'-d', fixedIconsDir
+	])
 	imagesPath = os.path.abspath (os.path.join ('website', 'assets', 'images'))
-	Tools.RunCommand ('svgo', ['-r', imagesPath])
+	Tools.RunCommand ('svgo', [fixedIconsDir])
+	Tools.RunCommand ('fantasticon', [
+		fixedIconsDir,
+		'-o', iconFontDir,
+		'-t', 'woff',
+		'-n', 'O3DVIcons'
+	])
+
+	websiteCssDir = os.path.join (rootDir, 'website', 'o3dv', 'css')
+	websiteIconFontDir = os.path.join (websiteCssDir, 'O3DVIcons')
+	if not os.path.exists (websiteIconFontDir):
+		os.makedirs (websiteIconFontDir)
+	shutil.copy (os.path.join (iconFontDir, 'O3DVIcons.woff'), websiteIconFontDir)
+
+	websiteIconsCssPath = os.path.join (websiteCssDir, 'icons.css')
+	shutil.copy (os.path.join (iconFontDir, 'O3DVIcons.css'), websiteIconsCssPath)
+	Tools.ReplaceStringInFile (websiteIconsCssPath, './O3DVIcons.woff', 'O3DVIcons/O3DVIcons.woff')
+
+	shutil.rmtree (tempDir)
+
 	return 0
 
 sys.exit (Main (sys.argv))
diff --git a/website/assets/images/context/hide.svg b/website/assets/images/context/hide.svg
deleted file mode 100644
index d537c03..0000000
--- a/website/assets/images/context/hide.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 18 18" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#838383" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M.5 9c6-6 11-6 17 0M.5 9c6 6 11 6 17 0m-16 6.5 15-13" style="stroke:#263238;stroke-opacity:1"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/context/show.svg b/website/assets/images/context/show.svg
deleted file mode 100644
index 11f761d..0000000
--- a/website/assets/images/context/show.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg viewBox="0 0 18 18" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#838383" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M.5 9c6-6 11-6 17 0M.5 9c6 6 11 6 17 0" style="stroke:#263238;stroke-opacity:1"/><circle fill="none" stroke="#838383" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="9" cy="8" r="3.5" style="stroke:#263238;stroke-opacity:1"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/dialog/arrow_down.svg b/website/assets/images/dialog/arrow_down.svg
deleted file mode 100644
index bd5d33d..0000000
--- a/website/assets/images/dialog/arrow_down.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xml:space="preserve"><path fill="none" stroke="#838383" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="m14 6.5-5 5-5-5"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/dialog/file_download.svg b/website/assets/images/dialog/file_download.svg
deleted file mode 100644
index 858b06c..0000000
--- a/website/assets/images/dialog/file_download.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xml:space="preserve"><path fill="none" stroke="#3393BD" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="m6.5 9.5 3 3 3-3m-3-6v9m-6 1v1c0 .6.5 1 1.2 1h9.6c.7 0 1.2-.4 1.2-1v-1"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/header/donate_hover.svg b/website/assets/images/header/donate_hover.svg
deleted file mode 100644
index 919a877..0000000
--- a/website/assets/images/header/donate_hover.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18" xml:space="preserve"><path d="M17.5 6.6c0 1.1-.3 2.1-.9 3-.4.6-.8 1.2-1.3 1.8-1 1.1-2.1 2.1-3.3 3-.9.7-1.8 1.4-2.8 2-.2.1-.3.1-.4 0-1.4-.9-2.7-1.9-4-2.9-1-.9-2-1.8-2.8-2.9C1.4 9.8.9 9 .7 8 .5 7.2.4 6.3.6 5.5 1 3.9 2 2.7 3.5 2c.8-.4 1.6-.5 2.5-.4 1 .1 1.9.4 2.7 1 .1.1.2.2.3.2s.2-.1.3-.2c.8-.6 1.7-.9 2.7-1s2 .1 2.9.6 1.6 1.2 2.1 2.2c.3.7.5 1.4.5 2.2z" style="fill:#3393bd;stroke:#3393bd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"/><path d="M12.5 3.4h.2c1.2.1 2.1.6 2.6 1.7.4.8.5 1.6.2 2.4" style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/header/feedback_hover.svg b/website/assets/images/header/feedback_hover.svg
deleted file mode 100644
index 1b9f231..0000000
--- a/website/assets/images/header/feedback_hover.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18" xml:space="preserve"><style>.st2{fill:#fff}</style><path d="M9.6 6.8h.5c-.7-1.9-2.4-3.3-4.6-3.3C2.9 3.5.8 5.6.8 8.2c0 .8.2 1.6.6 2.3-.5 1.1-.9 2.4-.9 2.4s1.1-.6 2.5-.7l.6.3c.2-3.1 2.8-5.7 6-5.7z" style="fill:#fafafa"/><path d="M17.9 16.3c0-.1-.5-1.8-1.3-3.4.6-1.1.8-2.3.8-3.6 0-4.8-4-8.8-8.8-8.8C3.9.5 0 4.4 0 9.2c0 2.4.9 4.6 2.6 6.2C4.3 17.1 6.5 18 8.8 18c1.7 0 3.1-.4 4.3-1.1 1.6.2 2.9.9 2.9.9.5.3 1 .2 1.4-.1.5-.3.7-.9.5-1.4z" style="fill:#3393bd"/><circle class="st2" cx="5" cy="9" r="1"/><circle class="st2" cx="9" cy="9" r="1"/><circle class="st2" cx="13" cy="9" r="1"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/header/github_hover.svg b/website/assets/images/header/github_hover.svg
deleted file mode 100644
index 8b93c2e..0000000
--- a/website/assets/images/header/github_hover.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18" xml:space="preserve"><g style="fill:#3393bd;fill-opacity:1"><path style="fill:#3393bd;fill-opacity:1;fill-rule:evenodd;stroke:none" d="M0 0c-8.995 0-16.288-7.293-16.288-16.29 0-7.197 4.667-13.302 11.14-15.457.815-.149 1.112.354 1.112.786 0 .386-.014 1.411-.022 2.77-4.531-.984-5.487 2.184-5.487 2.184-.741 1.881-1.809 2.382-1.809 2.382-1.479 1.011.112.991.112.991 1.635-.116 2.495-1.679 2.495-1.679 1.453-2.489 3.813-1.77 4.741-1.354.148 1.053.568 1.771 1.034 2.178-3.617.411-7.42 1.809-7.42 8.051 0 1.778.635 3.232 1.677 4.371-.168.412-.727 2.068.159 4.311 0 0 1.368.438 4.48-1.67 1.299.361 2.693.542 4.078.548a15.625 15.625 0 0 0 4.078-.548c3.11 2.108 4.475 1.67 4.475 1.67.889-2.243.33-3.899.162-4.311 1.044-1.139 1.675-2.593 1.675-4.371 0-6.258-3.809-7.635-7.438-8.038.585-.503 1.106-1.497 1.106-3.017 0-2.177-.02-3.934-.02-4.468 0-.436.293-.943 1.12-.784 6.468 2.159 11.131 8.26 11.131 15.455C16.291-7.293 8.997 0 0 0" transform="matrix(.5525 0 0 -.5525 9 .444)"/></g></svg>
\ No newline at end of file
diff --git a/website/assets/images/header/info_hover.svg b/website/assets/images/header/info_hover.svg
deleted file mode 100644
index 1df80d7..0000000
--- a/website/assets/images/header/info_hover.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18" xml:space="preserve"><style>.st1{fill:#fff}</style><circle cx="9" cy="9" r="9" style="fill:#3393bd"/><path class="st1" d="M9 14c-.6 0-1-.4-1-1V9c0-.6.4-1 1-1s1 .4 1 1v4c0 .6-.4 1-1 1z"/><circle class="st1" cx="9" cy="5" r="1"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/navigator/arrow_down.svg b/website/assets/images/navigator/arrow_down.svg
deleted file mode 100644
index bd5d33d..0000000
--- a/website/assets/images/navigator/arrow_down.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xml:space="preserve"><path fill="none" stroke="#838383" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="m14 6.5-5 5-5-5"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/navigator/arrow_right.svg b/website/assets/images/navigator/arrow_right.svg
deleted file mode 100644
index f10314c..0000000
--- a/website/assets/images/navigator/arrow_right.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xml:space="preserve"><path d="m6.503 14.003 5-5-5-5" style="fill:none;stroke:#838383;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/navigator/arrow_up.svg b/website/assets/images/navigator/arrow_up.svg
deleted file mode 100644
index 91fa0b8..0000000
--- a/website/assets/images/navigator/arrow_up.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xml:space="preserve"><path fill="none" stroke="#838383" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="m14 11.5-5-5-5 5"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/navigator/fit_navigator.svg b/website/assets/images/navigator/fit_navigator.svg
deleted file mode 100644
index 90c6300..0000000
--- a/website/assets/images/navigator/fit_navigator.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xml:space="preserve"><path fill="none" stroke="#838383" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1.5 5.5v-4h4m11 4v-4h-4m-11 11v4h4m11-4v4h-4m-11-15L6 6m10.5-4.5L12 6M1.5 16.5 6 12m10.5 4.5L12 12"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/navigator/hidden.svg b/website/assets/images/navigator/hidden.svg
deleted file mode 100644
index 7df38b3..0000000
--- a/website/assets/images/navigator/hidden.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xml:space="preserve"><path fill="none" stroke="#838383" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M.5 9c6-6 11-6 17 0M.5 9c6 6 11 6 17 0m-16 6.5 15-13"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/navigator/open.svg b/website/assets/images/navigator/open.svg
deleted file mode 100644
index dbccf3e..0000000
--- a/website/assets/images/navigator/open.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xml:space="preserve"><path fill="none" stroke="#263238" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M13.5 9.5v1M2 15l3.6-3.8c.4-.4 1.2-.7 1.7-.7h9.1c.5 0 .9.3.5.7l-3.6 3.6c-.4.4-1.1.7-1.6.7H2.5c-.5 0-1-.4-1-1v-10c0-.5.4-1 1-1h1.9c.5 0 1.3.3 1.6.7L7.6 6c.4.4 1.1.5 1.6.5h.8m1.5-3 3-3 3 3m-3 .5V.5" style="stroke:#838383;stroke-opacity:1"/><path fill="none" stroke="#263238" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M10 8.5c2.5 0 4.5-2 4.5-4.5" style="stroke:#838383;stroke-opacity:1"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/navigator/visible.svg b/website/assets/images/navigator/visible.svg
deleted file mode 100644
index e84fe2a..0000000
--- a/website/assets/images/navigator/visible.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xml:space="preserve"><path fill="none" stroke="#838383" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M.5 9c6-6 11-6 17 0M.5 9c6 6 11 6 17 0"/><circle fill="none" stroke="#838383" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="9" cy="8" r="3.5"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/sidebar/close.svg b/website/assets/images/sidebar/close.svg
deleted file mode 100644
index abc131e..0000000
--- a/website/assets/images/sidebar/close.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 18 18"><path d="m3.5 14.5 11-11m0 11-11-11" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" stroke="#838383" fill="none"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/sidebar/warning.svg b/website/assets/images/sidebar/warning.svg
deleted file mode 100644
index f63e430..0000000
--- a/website/assets/images/sidebar/warning.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg version="1.1" id="Layer_1" x="0" y="0" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><style id="style2">.st1{fill:#fff}</style><circle style="fill:none;stroke:#838383;stroke-opacity:1" id="circle4" cy="9" cx="9" r="8.5"/><path class="st1" d="M9 10c-.6 0-1-.4-1-1V5c0-.6.4-1 1-1s1 .4 1 1v4c0 .6-.4 1-1 1z" id="path6" style="fill:#838383;fill-opacity:1"/><circle class="st1" cx="9" cy="13" r="1" id="circle8" style="fill:#838383;fill-opacity:1"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/toolbar/details_active.svg b/website/assets/images/toolbar/details_active.svg
deleted file mode 100644
index 4b76fbf..0000000
--- a/website/assets/images/toolbar/details_active.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 18 18"><path d="M14.5 16.5h-11c-.5 0-1-.5-1-1v-14c0-.6.5-1 1-1h11c.6 0 1 .4 1 1v14c0 .6-.4 1-1 1zm-7-13h5m-5 3h5m-5 3h5m-5 3h5m-7-9h0m0 3h0m0 3h0m0 3h0" stroke-miterlimit="10" stroke-linejoin="round" stroke-linecap="round" stroke="#3393BD" fill="none"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/toolbar/fit.svg b/website/assets/images/toolbar/fit.svg
deleted file mode 100644
index 08e471b..0000000
--- a/website/assets/images/toolbar/fit.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" xml:space="preserve"><path fill="none" stroke="#263238" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M1.5 5.5v-4h4m11 4v-4h-4m-11 11v4h4m11-4v4h-4m-11-15L6 6m10.5-4.5L12 6M1.5 16.5 6 12m10.5 4.5L12 12"/></svg>
\ No newline at end of file
diff --git a/website/assets/images/toolbar/settings_active.svg b/website/assets/images/toolbar/settings_active.svg
deleted file mode 100644
index 8379c71..0000000
--- a/website/assets/images/toolbar/settings_active.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 18 18" viewBox="0 0 18 18"><path d="M14.9 7.9 17 6.1h0c-.2-.5-.4-.9-.6-1.4-.3-.4-.6-.9-.9-1.2h0l-2.6 1c-.5-.5-1.2-.9-1.9-1.2h0L10.6.6h0C10 .5 9.5.5 9 .5s-1 0-1.5.1h0L7 3.3c-.7.3-1.3.6-1.9 1.1h0l-2.6-1h0c-.3.5-.6.9-.9 1.4-.2.4-.4.9-.6 1.3h0l2.1 1.7c-.1.8-.1 1.6 0 2.3h0L1 11.9h0c.2.5.4.9.6 1.4.3.4.6.9.9 1.2h0l2.6-1c.5.5 1.2.9 1.9 1.2h0l.4 2.7h0c.5.1 1 .1 1.5.1s1 0 1.5-.1h0l.4-2.7c.7-.2 1.4-.6 1.9-1.1h0l2.6 1h0c.3-.4.6-.8.9-1.3.3-.4.5-.9.6-1.4h0l-2.1-1.7c.3-.8.3-1.6.2-2.3" style="fill:none;stroke:#3393bd;stroke-linecap:round;stroke-linejoin:round"/><circle r="2.5" cy="9" cx="9" style="fill:none;stroke:#3393bd;stroke-miterlimit:10"/></svg>
\ No newline at end of file
diff --git a/website/embed.html b/website/embed.html
index 99abcb4..170e286 100644
--- a/website/embed.html
+++ b/website/embed.html
@@ -80,6 +80,7 @@
 	<!-- engine end -->
 	
 	<!-- website start -->
+	<link rel="stylesheet" type="text/css" href="o3dv/css/icons.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/core.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/controls.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/dialogs.css">
diff --git a/website/index.html b/website/index.html
index ece1811..71e9d3a 100644
--- a/website/index.html
+++ b/website/index.html
@@ -80,6 +80,7 @@
 	<!-- engine end -->
 	
 	<!-- website start -->
+	<link rel="stylesheet" type="text/css" href="o3dv/css/icons.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/core.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/controls.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/dialogs.css">
diff --git a/website/info/index.html b/website/info/index.html
index f92329e..d6b6e42 100644
--- a/website/info/index.html
+++ b/website/info/index.html
@@ -166,8 +166,7 @@
 			There are two ways to load models from your computer:
 			<ol>
 				<li>
-					Use the open button on the toolbar (<img class="inline" src="../assets/images/toolbar/open.svg"/>). Here you can select all the
-					relevant files.
+					Use the open button on the toolbar. Here you can select all the relevant files.
 				</li>
 				<li>Drag and drop all the relevant files into the browser window.</li>
 			</ol>
@@ -175,7 +174,7 @@
 	
 		<h3 id="loading_models_server">Loading models hosted on a web server</h3>
 		<p>
-			You can load models by url with the open url button on the toolbar (<img class="inline" src="../assets/images/toolbar/open_url.svg"/>).
+			You can load models by url with the open url button on the toolbar.
 			Here you can list all of the model files. You should place every file in a separate line.
 		</p>
 		<p class="info">
@@ -189,7 +188,7 @@
 		<p>
 			<ol>
 				<li>Commit models to GitHub with all the required files.</li>
-				<li>Go to <a href="https://3dviewer.net">3dviewer.net</a>, and click on the open url button in the toolbar (<img class="inline" src="../assets/images/toolbar/open_url.svg"/>).</li>
+				<li>Go to <a href="https://3dviewer.net">3dviewer.net</a>, and click on the open url button in the toolbar.</li>
 				<li>
 					Open the files on GitHub, copy the link of the file from the address bar, and paste it in the dialog. See the example below.
 					<div class="code">
@@ -208,7 +207,7 @@
 		<p>
 			<ol>
 				<li>Upload models to DropBox with all the required files.</li>
-				<li>Go to <a href="https://3dviewer.net">3dviewer.net</a>, and click on the open url button in the toolbar (<img class="inline" src="../assets/images/toolbar/open_url.svg"/>).</li>
+				<li>Go to <a href="https://3dviewer.net">3dviewer.net</a>, and click on the open url button in the toolbar.</li>
 				<li>
 					Get the sharing link from DropBox for all of the files, and paste it in the dialog. See the example below.
 					<div class="code">
@@ -222,7 +221,7 @@
 
 		<h3 id="loading_models_missing_files">Missing files</h3>
 		<p>
-			Sometimes you see missing files in the tree (<img class="inline" src="../assets/images/navigator/missing_files.svg"/>). It means that your model
+			Sometimes you see missing files in the tree. It means that your model
 			refers to another files, but they are not selected to import. To solve the issue you have to import the model again together with the referenced
 			files, or just import the missing files on their own.
 		</p>
@@ -230,12 +229,12 @@
 		<h2 id="sharing_and_embedding_models">Sharing and embedding models</h2>
 		<p>
 			If your models are hosted on a web server, you can share the link with others, or you can generate embedding code to integrate the viewer in your website.
-			To get the sharing link or the embedding code, click on the share model button (<img class="inline" src="../assets/images/toolbar/share.svg"/>) in the toolbar.
+			To get the sharing link or the embedding code, click on the share model button in the toolbar.
 		</p>
 
 		<h2 id="settings_panel">Model and visualization settings</h2>
 		<p>
-			You can access model and visualization settings by clicking on the settings icon (<img class="inline" src="../assets/images/toolbar/settings.svg"/>) on the toolbar.
+			You can access model and visualization settings by clicking on the settings icon on the toolbar.
 		</p>
 		<p>
 			<ul>
@@ -246,7 +245,7 @@
 
 		<h2 id="exporting_models">Exporting models</h2>
 		<p>
-			You can export your model in several file formats. To achieve this, click on the export button in the toolbar (<img class="inline" src="../assets/images/toolbar/export.svg"/>).
+			You can export your model in several file formats. To achieve this, click on the export button in the toolbar.
 			After that select the format you would like to export to, and download the resulting files one by one.
 		</p>
 
diff --git a/website/info/info.css b/website/info/info.css
index 7717c3c..4a6d548 100644
--- a/website/info/info.css
+++ b/website/info/info.css
@@ -1,7 +1,7 @@
 @font-face
 {
 	font-family: Quicksand;
-	src: url('../assets/fonts/Quicksand/Quicksand-Regular.ttf');
+	src: url('../o3dv/css/Quicksand/Quicksand-Regular.ttf');
 }
 
 html, body
@@ -24,14 +24,29 @@ a:hover
 	text-decoration: underline;
 }
 
-img.inline
+div.inline
 {
+	background: red;
+	font-size: 18px;
 	width: 18px;
 	height: 18px;
 	display: inline-block;
 	margin-left: 3px;
 	margin-right: 3px;
 	margin-bottom: -4px;
+	line-height: inherit;
+}
+
+i
+{
+	width: 18px;
+	height: 18px;
+	display: block;
+}
+
+i[class^="icon-"]:before, i[class*=" icon-"]:before {
+    height:18px;
+	margin-bottom: -4px;
 }
 
 h1
diff --git a/website/o3dv/css/O3DVIcons/O3DVIcons.woff b/website/o3dv/css/O3DVIcons/O3DVIcons.woff
new file mode 100644
index 0000000000000000000000000000000000000000..cd425dd76bbdbd8d50a2ad8821008e020e94d61d
GIT binary patch
literal 5924
zcmY+IWl$VUu&x((cXxLWZo!@4x{Jf&5-hlDAV6?;_u#NVkf6bXYk<XF1023{Z{4cf
zRb4aBJKZx=Gyh(14S9J04B$P8=mBW|jcn-uhyR=Z|Do_nR|WupL4H?7-&2P=j=@jk
z6BqBh_VJyi-cwKfLWRZB3FP{&g}?I@004)74KjYUb@a6X0AO_h0GtT`fMy~X)#K96
z8e|0k;8VZXz3%}KH27AaZTBv|YwvXciua_4)q_#7bMo|g*F4{u;XQ-tP2P?iT`d2r
z%X#PbI{{<@IX@FRfqdT2#ov18|9Yum_yLE`ASY`8fZ!e92>?rr1f1S;b@6!Li}0NR
z=kL0yA+>syPmU$f3JBb?;088W0^QxNQ9xVcO6<QZlPrLsU_g=>Z#EATpLlWz+%Vi&
zW3W9YwM|$wEPzoIK@sr3y*f5I5Xcw=((rW~H)%d}7LWLW_zMYf2C+dVNkeEb{}O&A
z92JS=7~c_~V>bQ?-BBtFhaL$4NkPf>$vK@_cKS(8EVn(Fap{;BU~W$>P?{z7m!(#_
zf3I&X6-R|iK^|xbh!5fX5{?dy3eP*wP;=_F+}P*KcT!vY!g1~$uVmSMAed<3l*o0b
zn!y_vfQI<J#-JHAo+yr#nDfD7dn`c|E3ccmvFG58gukS|udN90$LD=I*;7?-{bnfP
z(I3zHR-yTrLUjx;n+lJ)fTf5+%(A{}6<Je~qZLh|$WDRz+`==ATVREPtT@ThvL;ug
zpTK-};RePns6s<FfW(1kjLXMc<^7j^auy5?ztS)3CVDLWp-YdBpQtgZ;;rWGs;&b6
zni$KeJFC0$oSxmaw~QoF3G4Pp<Zj{s`3}QHt6fFfhC|{JzF}YiA+R);uvmdx2q=c~
z5I)>jIAj!>Od>3m>s&I!b#V?l-}r-m!}UxYA?LOB`#g`{>i{OPtA}ffb7M28Z*{7X
ztb=Ls@>R}vrg7*`D}M0;50;-Bi43?aK?A6CllWBEYP_VAO%8b9$Qb0ShyM}EpIWGX
z+9RIdDJRGN>K{g!BAcbkM5SvX5>T#H@^|A0*Qwpt`93s`d8?-uLZcmDyOFjlx0r6B
zX|L2|7S-i}Bx0Y|98OGV@NoUy>s=3vgLQZS`|q9XjDr_pRA|;hPsc0Mt032+%O`id
zp$gmZ%(^LV=T;mQn!l71+N3>wZEf|FvIm=`Z@U9S!jh8*Tt}a%jz3)GT}kY`6y0~;
zA8c&;nayoMAEIopi>7|UYUHYqMP)Uv#dHCY_)B2*c}a`6lhpN8{^h#2od@*yo@)5e
z#_7_3DbzhuAagUoYN<ki5>YxwI(<o7xw)m*{m6^vsfI*S!&ysJeN(;J^$2!3K5UWh
zjn`RI2~{PF*W+4o)BF@k>5MfSXklTW#p-1##+`#fA27W*-IE*UZ+7^PwJ4zee6kz7
zA=+cRZA=yB9WeatbYT3zh7;v_<r|mKDwbJi>4xrc$0C%*gHvP+Puzf*Ydbzvq6#`$
zaBMYEW%B2L0=3q+V8Y`-6?@+T3Q<8w5@-uZ67=EJmrD<XPjJ)pef1^WD^$#o!RE*k
zTpL@L=eH%rXL>c}z-?PF?XWuR8tvmX6+1V|M5T1oE0&iKRa(H!T$Vg7ehDlC^T0&(
z^uDAW-UR*GMno-U#erInH$>2$AcH)x)}4B4UId<r0CCq=#}r)Jj#e01He=OjG@$JL
zEup}ML5U>7P^e=YX|h&t<WE+-S8c~~yNQ04;mV4OoIqG9$}U@BQNyVU`zq;CG<yYs
zR{3{)d$ZwZ8OB`s5yVm_uDHZ{Cwgmk`%m)HSu2qm@)m2I+>0DTb9vtPoTi0rkmka+
zQ`5^lpv(9u&6^bWVg6jqHGd66o$0`8+`><r@XpS!DQkHah6^AbWov|VY`Y`%FaA&0
z1fh?5RS(6-n1cHXt=hXoyEtbv(v5$)#-4F@5qtA?fw`&Qg2W;-)ACe0G+R`1@BHBe
zPvR?9wdps(1Qc;f#Ap0u{JvGMXDZ%|DJpX+qABHWWGjjm{yykd(H(*w+rCF<WZrLR
zc}=IMv_*M$8{Q!^k*DxsH6K1f*vU2HSdCTL_I{=hMUeM^dJ&?G<NWt4iQPCmJ_KAm
z*&>}LR8lbpmXSV<EtruUb~lVoGs`|<lwM|6l?j$t^-Mo%4WsCBCEQSrRBqYL%G1$F
z+O&&@EGQa+8Y@1CQl6NxW_QxGwMI8kxZcqJPRC=&ZoVrhK58nC3Dk9fs>Fv%Co^t0
zYR5@|rFoTwDZ{&hF&{$UAaEZeL^sG9UQ==|LB8y+sd_&~BFVWJ=~@O}ErB7Y!jk#@
zUI!<C0flhNRKfXB6w=<%MzYF<*xE`V_X#O*c2ioa56<>S8qMqR#ul7u)WCR#w@Rx;
zV6TcyU|I5j2I%7qM+>fYX3M3pwmFeDzuQ;r!ZZ*wHYzJRau-q_4&sM<t05HZY$um(
zQ*#AdvrPXpSPwU9fcf7UH%zXirL9hu)Bb%<w7j`)exx15v^J-K*X)O*DGF;?atY3t
zm*wXRZp$$F7(|l57$K5o!gKQq?Kl*7O~=1&r3t2dWskO3Zk_WN0zdLz0oQv|n>Jr^
zE&=WzLh?n(ZnzKB&exuk?!g2bmKtbfJk@x2zteX4u9v?hTc_`{{Dp&b(}}4*D(4Ku
zg}gdSj5Au!5ocSHD@2jgp9(9}W4DlRHdOH4#Kx?nkTpq#YmAgyRq%u&$`WJpQDUw#
zoB)p3pV+=se-<VeIiSGY>U3o&bO{LkUE7Iat9#yb`c(N9@?#LROsMSOrBbh;;2lGe
zQW9mUEmQH?_5*x_VGJ9@v;?pAw~A43*W5lQKc&OkB@vcD1Ia@qj7YOu>VBnGa0Rvt
zWzeLY{q!@|`NZ|-jJPYpeFA<f<cnVp{dqg>#o!6kmg%bD1^3|>3Trtt=2c?z`-GZY
z7Y(GvD9e;Pg;Ind{?FWhPn$Cx4{Hw?6Daj4RLtdgpywaIq-sw(Zk%C$QO}!Xwx1Rq
z4t87FE*4*C5CP@%HEyoBRMgFr8XuZ`p=i6vEc6B^fIEtN6%rXH{*+9e08zLr+$Lxa
zJX-)IT?MU?G<i~VB<E&$xAV-!p$*EOpo$v&RhgT#lFNrd3&GX3kMjE7ipe7WACJ-_
zx_80E4S5e2xKM>@2?Dop1#@Xv)HU%k{Rpng%(+-UaR>g8g>N2hTt9@A*0hbz9Xk8+
z;EzdsgqF09zw;gIk3$@Y%h^gbMcNRrGc#suL0)2_wmP4!sC-e5AC-7UOaOGod%O(p
zVNE5*rngEARd_3-7+rGJ{(VgKw!@qp^NT86Fs`Xj^D34oPEu8C!Mn=aQ?<D5WG4j+
zm3}UPvHo4wYcEuL^KdJdfr<LGRaSiY{ncfQsuVm1><41!O<q&n$1748glyiSx^(%$
zjvP@ZuGfp*j@CL1<O=ZBDMjJtQ_J(ZJ3BOi0q(sVu~tTUwCtmnbWXtVSyXaiXJ+bB
z?jH78a_(q0C!ZOPV5nV*XOf5LB5ShCjKEPi&j?Q#iTZ8(s-v<1#k8u@s>6LF)h6o?
zSaxGi6kis_WWx^+N4(s~3O_r>iaKux4H!bc8Nz+K3L)&pda{w8bI=Y&^;X>@3h^Y>
ztzyfP<|X-2cSn_($RYfel;~kv_(v38{*^d!`M0GV`N5+sQ{d!^t+Kqz-4#l)$hY|>
z<%1DGo2(WK^;ytQ|6k9&MXH`c;l1vE_waq^936?du|m}T9L5xfok0=X?))8^V}>>6
zd0%2jvy^aa6IHJ%Zf$m+ui0|zoO)$oT32YXcB_Lq(RK7kITUw`Oto>cPB8={&X(lr
zhbKKiKNTYK<=lK6;~EH!{fTKoWKZ^H*JR$CQZ3|u9YS~Ni(1<SqbR{c;(0qcp)tQQ
zJ>n%g6EJf{VQS38{a7*M%)Fmx`CgnH%csW6Q3pM@LODy&hwYXKWDCT-c7acIW<s&o
zuXk%dCZ~YlFRRH>0v<dXz@2?1loo$nq=Cnt07bGOpW1}YCf-*ZT*#GzA+&cgORpot
z`n3lk_on;4=z2@Fq16Zio~oABug6JTgQQc`2scB5n64LaK53Ti6Dq{{X6g+w6TwyU
zq13TZq}zfbAVFrD9N@O(f|g2waqZt=80^;>y~2nmhjpTJ6GANxyzFdG=nN-CYD6la
z-i>%}Nou7wDH-F4CM+KnJgO@-3iv}DVi>RF=)$&DUSDdGw{=Jw-TqHG$1dL)b{<oi
zevlelL(+6JS|af{HcZvK^Txl3YQdtGHjxruNFvav<*(GUJ)SVjvZ8Qs>YN1*g^yZ&
zT=eE(U`TH20_P;aexR~}&gwFa!zmEGDFB^Duv5CaSRZ=G!qhLx@s|z#jH{YNf~(g@
zq?qUxir|-gho~=+!o4P`q=EX>)X8Bp*uV9(Jc5{yUbhK3@VijrwwZ4CJ)tAw>QBnM
zm)L%3x?hgU;J4vJ0FhJ825fZi&&f?a`b{>maR%VD-8aU~fGG;C$K7gJgF3ca)irCB
z&?`_kQMmg~N5JwM=KzyJhZDN{2O-l7cRjovp6&DLpgAq~<x$ll8Hyokoz2PvnsOq;
zdH2i~RXZKF>aVni^6jeSgblwkUXa;<s++wrzr$vKKlvsOv@Lb_(iz4$hCw$?Ql5-y
zlVa);e(XRV@IT67)36`)P*2E-PsP=gdgibYc<;2ZAa^rY(<N?c8WSJ$#8M-*9+=vN
zjY6+O+Ta4tz6?-5dN3e&IC=5*MCY!>FZ0Cy`w8`cYcuF(tXtn=G4FFWi>&^1QTQi%
z=mf!Ud#G9g+((?y|C+HUo|x8ynAjF7Y7UK2s55)1O!yk*`7{fKvY2+=A-k#8A0zm0
zctGyCbQWMoUl&nnOr>z*;^XAuvg$E<7P-dZw35?fF?GF4E>oMoH+OaG8)glT+fWN$
zhX6;2SE~@c5)5$&PyVpFz*K9lc`(1Kxh4dYkcPJOCO=L*);b?(LFB^ybwm2>84;C)
zxNARRP|F4Dc@dPwvgvA(n(_CnLNH}niqQ)ws{Jtd5d*%d3eCy$UGJWl0`;*quw^{S
z9(z`2CyMvlN4=crEPrjQB*SYN3E6ClZ%q6ZvT}Iw%m`=Em56j{SD1vaG!>;Fn$h{*
zW^x&eM!F?^tKN*ns^)=Hh}29!5|v}F^Z9|{JkI48Dti5pxKg)?aBfhT0VQo75fk2;
zfkF8l&moG;75=h&0rst9(Tu0qPO7k*f;B_FZwC10g>;9i*4Wr?NJFex#vEfcnil-A
z8bK|A4Jk?_#>xj-WOnySjw+NTloRxjAZwMLm9M-!`W6T*RqJb?4T<l)2_Un8!Ac6s
zK*e(hN||7;5`JG&4~5=J0;E1X<0ZN)8IOSwQ{x*zgZeiLaKwA~3E+v1vVilj4WaJ7
z>sR00U7K#-k-3;K@q64-D||9kz~f_9&#tT2L`7l`Tl?@45XTe0LjTtb91o=~!AGLK
zVkKd=ob^b~kgId8{V^_%Kcq1P0LY>T<3?!&8`kbPhPxtXcAjee;JlrfaJllFj59k0
zJl4<53gAQD;s+@Qv&sE@BwU%;)zR2)drx+_-1%q+FJvmG8eLz`7fs`)E{Pwwtg}mp
zha)B{q^LwPS+tJpatii01#reJDF*Zh$%{r+Mzn_c(Q322CEbNysl+r42^X8wu#Z56
z#C(a&_GKMb*3t6Mqz6e;zV(}_ZhOzH>bTXZYN38bIvBV}N@}A;5w^|nFuC^j6lJaK
zYH1i2k}cRwN!*^93}3nNCNSgV^-yR_t)u>ZkkPlqOOCkjq-B`5k2N&%R1a?rOp-6a
zOx=c>;#6hbdIh6v?P(66;;Z*oW{=4-tc-#&z!6ljrhZt~TD;6J1t(q{U1qXFffy4S
z6(t*rP_x89kM+C9Hlq%K6H$gZriTrT&qTv0`p|l_=bkhpXLb>U0h?kS>LiCY-EWf8
z1NLcMM@VcZ8->m=#vYnsB{ZUEAXOB8NUwhJ2G?!fWrId~Bi^(>m*~1U_Cog1W6fX1
zqH6jH93iH0R_KYT-C%00vT$b)SU1(fed6-NHnNyuO=HTjjjWrr+QXUsZJ--(-oH|*
zDdH>eICTX>;ji^$oFOHItr`0a=1L?OlOz3~f-2+K7uT`;+7vlEFh7N!s91b-Eo#h>
zcqnuX3-xxrDS6fA(0|_HIys1Y)=TqbAiLxJbt>VI%T08?qaOMv1%YKrKu8}LxLCF=
z^?{vT8BM^!K!hiK8cmO(vXZ~@#;JDqDQI^rz5@$HN)+*r&w6pB`5lYD%&)eWE2@=N
zTbX&xI)zKuh0VqXwi~0GlslI%?aB<R^|N%(b+F#nQa$Clmmy~F42WX7@VQH94qm)2
z9Q%xn5^apFRhx+!Gy(s4DKCb&Gn|y;Rje<++^aS}pJ#kOHbN9RpUvo^?D(DkB5!y?
z;ks?n-fB_{Chkf<UJW#`d}0r7^vXRllGa&L%2?-j_I{3-@|>yPAPNrVzxsLq99L(b
zaaQEQL0uvJM*HuHK!1l=FzQmy)Uxd?yG#|X52r%W4XW)0w#K04#h|0~3T6}^^(wQ-
z82j43)j0F1stx3nBTw`2H>e&=8PRs0>+j9F-e`6kW{o8=y^g8-++0xt2M5%xF|EtJ
z3iZfy<Nf00zM+~x#Yt5Y`7s3?!}AL|-!gH7A9cBq%lK#lGf1g)T48kP0r%^JAgO}?
z)s^18QIJ10mLBaBff8y!ckcOts6uqnk?R-7z0jI3>12qzr>fKd$!RWNi59Dp$>c>4
zjAy{i;s5o;06UV(W4@RF1kFj>NxXt-(FLl=NP#zR=5IkfM?6Px9pvb$)LH;O612$w
z{Gb2z(&j-xK=NDA%iBoB2xK%E6(3-824D1Uy8XBQ9`pSXZ*NhveHRsvNLomr;O4@d
z5e1vy-Vgvk8;Eq@>;5-b0eXO7Kqt&TY&RS&ToODjd@TGPLJq<!q7C8%(r2U#WJMHB
zltWZ@)GIU*v{&>2j91J^EN-kn*bdnH|L-oE!1h7N5CB$HY68LL4e6Q$K#LChpGoMG
z<CG-sFvv|DX?{@8AA)Pd?1@LwnJN;LMB|}2ia)xw?q<c*|0BKz-aRC*!1j>DFEmkH
z_Ur6Y)#z_|*vCi8o_s4ZDWd!fO$@B1&$aRx`Za+a>PI5ZNmS%QGyTQ8gfDTsf_Xfj
z*ZL`B^0ox3=A1#~ORi!1BVJEJBN$g*yNqX-+wF31f7=rPn~9=6SHt5o{01Lcx%7F3
zO9~~HY>`Viy;+Ii`hq@tWU5e*cHkVRFn|5^JHz0ok+nscJKda4j7)V;e0-lkS;mcD
z<8@#OFFVgbs!Nj;d;~dzUXr4#)EL(y(cN2iFh$mMZY=`h#Y|sPHedRx<ESKaBj|Gi
z-V(0DhH!~MwBg7EvsFpvY3(dac@fLWMjm6)ePgRB0^_0EaL`q6kN7jpaJR|W`<o^F
zavtQymYwv`I68aI3e2QYDE84b<fSiFf4<e-xznSJRtTm}k>h1kdtD+$D;Z5HmWn|Y
z_-?QbkD=}s>0z>ktKUA1;p`UWFSdoF;WLb8b{Q$Kky7e9rC!^TVmNu|vl`{Fzn<aJ
za;u|a;nIq%ql_Bb%2gu3L)b!9i<U<FE%(nC{#XHur4|BSN&0+NOqHSM_C=%8BT4?u
zSusLm%$GVgzwh5vhvk>A?yD(_gb6R5s5etw5byFPe~6#$hozOUiGH*9R<}i}5R1Sj
hleq73O&!Xw4+}`oKk1m$Q6I=OQ2a(kl4iyM_#b$`6xIL$

literal 0
HcmV?d00001

diff --git a/website/o3dv/css/controls.css b/website/o3dv/css/controls.css
index 60a2105..77de8ec 100644
--- a/website/o3dv/css/controls.css
+++ b/website/o3dv/css/controls.css
@@ -1,22 +1,29 @@
-img.ov_svg_icon
+div.ov_svg_icon
 {
+	color: var(--ov_icon_color);
+	font-size: 18px;
 	width: 18px;
 	height: 18px;
 }
 
-img.ov_svg_icon.left
+div.ov_svg_icon.left
 {
 	margin-right: 10px;
 	float: left;
 }
 
-img.ov_svg_icon.left_inline
+div.ov_svg_icon.left_inline
 {
 	margin-right: 10px;
 	margin-top: 2px;
 	float: left;
 }
 
+div.ov_svg_icon.selected
+{
+	color: var(--ov_primary_color);
+}
+
 div.ov_thin_scrollbar
 {
 	scrollbar-color: #cccccc transparent;
diff --git a/website/o3dv/css/core.css b/website/o3dv/css/core.css
index 0af59b1..88d99f1 100644
--- a/website/o3dv/css/core.css
+++ b/website/o3dv/css/core.css
@@ -6,6 +6,7 @@
     --ov_primary_hover_color: #146a8f;
     --ov_secondary_color: #ffffff;
     --ov_secondary_hover_color: #e4f4ff;
+	--ov_icon_color: #263238;
 }
 
 @font-face
diff --git a/website/o3dv/css/dialogs.css b/website/o3dv/css/dialogs.css
index dcd1f17..1334ce2 100644
--- a/website/o3dv/css/dialogs.css
+++ b/website/o3dv/css/dialogs.css
@@ -102,6 +102,13 @@ div.ov_dialog a.ov_dialog_file_link
 	border-radius: 5px;
 }
 
+div.ov_dialog div.ov_file_link_img
+{
+	color: var(--ov_primary_color);
+	margin-right: 10px;
+	float: left;
+}
+
 div.ov_dialog div.ov_dialog_file_link_text
 {
 	float: left;
diff --git a/website/o3dv/css/icons.css b/website/o3dv/css/icons.css
new file mode 100644
index 0000000..e02c8cd
--- /dev/null
+++ b/website/o3dv/css/icons.css
@@ -0,0 +1,109 @@
+@font-face {
+    font-family: "O3DVIcons";
+    src: url("O3DVIcons/O3DVIcons.woff?635260a48b8099b02c71a5bd51ded212") format("woff");
+}
+
+i[class^="icon-"]:before, i[class*=" icon-"]:before {
+    font-family: O3DVIcons !important;
+    font-style: normal;
+    font-weight: normal !important;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-arrow_down:before {
+    content: "\f101";
+}
+.icon-arrow_right:before {
+    content: "\f102";
+}
+.icon-arrow_up:before {
+    content: "\f103";
+}
+.icon-close:before {
+    content: "\f104";
+}
+.icon-deisolate:before {
+    content: "\f105";
+}
+.icon-details:before {
+    content: "\f106";
+}
+.icon-donate:before {
+    content: "\f107";
+}
+.icon-export:before {
+    content: "\f108";
+}
+.icon-feedback:before {
+    content: "\f109";
+}
+.icon-file_download:before {
+    content: "\f10a";
+}
+.icon-files:before {
+    content: "\f10b";
+}
+.icon-fit:before {
+    content: "\f10c";
+}
+.icon-fix_up_off:before {
+    content: "\f10d";
+}
+.icon-fix_up_on:before {
+    content: "\f10e";
+}
+.icon-flip:before {
+    content: "\f10f";
+}
+.icon-github:before {
+    content: "\f110";
+}
+.icon-hidden:before {
+    content: "\f111";
+}
+.icon-info:before {
+    content: "\f112";
+}
+.icon-isolate:before {
+    content: "\f113";
+}
+.icon-materials:before {
+    content: "\f114";
+}
+.icon-meshes:before {
+    content: "\f115";
+}
+.icon-missing_files:before {
+    content: "\f116";
+}
+.icon-model:before {
+    content: "\f117";
+}
+.icon-open_url:before {
+    content: "\f118";
+}
+.icon-open:before {
+    content: "\f119";
+}
+.icon-settings:before {
+    content: "\f11a";
+}
+.icon-share:before {
+    content: "\f11b";
+}
+.icon-up_y:before {
+    content: "\f11c";
+}
+.icon-up_z:before {
+    content: "\f11d";
+}
+.icon-visible:before {
+    content: "\f11e";
+}
+.icon-warning:before {
+    content: "\f11f";
+}
diff --git a/website/o3dv/css/treeview.css b/website/o3dv/css/treeview.css
index 67d7c5f..00ff960 100644
--- a/website/o3dv/css/treeview.css
+++ b/website/o3dv/css/treeview.css
@@ -27,14 +27,15 @@ div.ov_tree_view div.ov_tree_item_button_container
 	float: right;
 }
 
-div.ov_tree_view img.ov_tree_item_button
+div.ov_tree_view div.ov_tree_item_button
 {
+	color: #838383;
 	padding: 5px;
 	float: left;
 	cursor: pointer;
 }
 
-div.ov_tree_view img.ov_tree_item_icon
+div.ov_tree_view div.ov_tree_item_icon
 {
 	padding: 5px;
 	float: left;
diff --git a/website/o3dv/css/website.css b/website/o3dv/css/website.css
index 3e9b9ac..2ca2725 100644
--- a/website/o3dv/css/website.css
+++ b/website/o3dv/css/website.css
@@ -50,12 +50,7 @@ div.title_right a
 	padding: 11px 5px;
 	display: block;
 	float: left;
-}
-
-div.title_right img
-{
-	width: 18px;
-	height: 18px;
+	text-decoration: none;
 }
 
 div.toolbar
@@ -196,8 +191,9 @@ div.ov_navigator_info_panel div.ov_navigator_info_button_text
 	float: left;
 }
 
-div.ov_navigator_info_panel img.ov_navigator_info_button_icon
+div.ov_navigator_info_panel div.ov_navigator_info_button_icon
 {
+	color: #838383;
 	padding: 6px;
 	float: right;
 }
@@ -218,8 +214,9 @@ div.ov_sidebar_title div.ov_sidebar_title_text
 	float: left;
 }
 
-div.ov_sidebar_title img.ov_sidebar_title_img
+div.ov_sidebar_title div.ov_sidebar_title_img
 {
+	color: #838383;
 	float: right;
 	cursor: pointer;
 }
@@ -324,6 +321,11 @@ div.ov_property_table div.ov_property_table_button
 @media (hover)
 {
 
+div.title_right div.header_button:hover
+{
+	color: var(--ov_primary_color);
+}
+
 div.ov_toolbar div.ov_toolbar_button:hover
 {
 	background: #c9e5f8;
diff --git a/website/o3dv/js/exportdialog.js b/website/o3dv/js/exportdialog.js
index 530e4e2..2ee3422 100644
--- a/website/o3dv/js/exportdialog.js
+++ b/website/o3dv/js/exportdialog.js
@@ -215,7 +215,7 @@ OV.ExportDialog = class
             let fileLink = $('<a>').addClass ('ov_dialog_file_link').appendTo (fileList);
             fileLink.attr ('href', url);
             fileLink.attr ('download', file.GetName ());
-            OV.CreateSvgIcon (fileLink, 'assets/images/dialog/file_download.svg', 'left');
+            OV.CreateSvgIcon (fileLink, 'file_download', 'ov_file_link_img');
             $('<div>').addClass ('ov_dialog_file_link_text').html (file.GetName ()).appendTo (fileLink);
         }
 
diff --git a/website/o3dv/js/modeldata.js b/website/o3dv/js/modeldata.js
index 8f4e551..77b0378 100644
--- a/website/o3dv/js/modeldata.js
+++ b/website/o3dv/js/modeldata.js
@@ -40,9 +40,9 @@ OV.MeshData = class
     {
         this.visible = visible;
         if (this.visible) {
-            this.showHideButton.SetImage ('assets/images/navigator/visible.svg');
+            this.showHideButton.SetImage ('visible');
         } else {
-            this.showHideButton.SetImage ('assets/images/navigator/hidden.svg');
+            this.showHideButton.SetImage ('hidden');
         }
     }
 
@@ -55,13 +55,13 @@ OV.MeshData = class
     {
         this.menuItem = new OV.TreeViewButtonItem (name);
 
-        let fitToWindowButton = new OV.TreeViewButton ('assets/images/navigator/fit_navigator.svg');
+        let fitToWindowButton = new OV.TreeViewButton ('fit');
         fitToWindowButton.OnClick (() => {
             callbacks.onFitToWindow (this.originalIndex);
         });
         this.menuItem.AddButton (fitToWindowButton);
 
-        this.showHideButton = new OV.TreeViewButton ('assets/images/navigator/visible.svg');
+        this.showHideButton = new OV.TreeViewButton ('visible');
         this.showHideButton.OnClick ((ev) => {
             callbacks.onShowHide (this.originalIndex);
         });
diff --git a/website/o3dv/js/navigator.js b/website/o3dv/js/navigator.js
index 213f572..a99c81c 100644
--- a/website/o3dv/js/navigator.js
+++ b/website/o3dv/js/navigator.js
@@ -94,7 +94,7 @@ OV.NavigatorInfoPanel = class
     {
         let button = $('<div>').addClass ('ov_navigator_info_button').appendTo (parentDiv);
         $('<div>').addClass ('ov_navigator_info_button_text').html (buttonText).appendTo (button);
-        OV.CreateSvgIcon (button, 'assets/images/navigator/arrow_right.svg', 'ov_navigator_info_button_icon');
+        OV.CreateSvgIcon (button, 'arrow_right', 'ov_navigator_info_button_icon');
         button.click (() => {
             onClick (button);
         });
@@ -147,7 +147,7 @@ OV.Navigator = class
         let usedFiles = importResult.usedFiles;
         let missingFiles = importResult.missingFiles;
 
-        let filesItem = new OV.TreeViewGroupItem ('Files', 'assets/images/navigator/files.svg');
+        let filesItem = new OV.TreeViewGroupItem ('Files', 'files');
         this.treeView.AddItem (filesItem);
         for (let i = 0; i < usedFiles.length; i++) {
             let file = usedFiles[i];
@@ -156,12 +156,12 @@ OV.Navigator = class
         }
 
         if (missingFiles.length > 0) {
-            let missingFilesItem = new OV.TreeViewGroupItem ('Missing Files', 'assets/images/navigator/missing_files.svg');
+            let missingFilesItem = new OV.TreeViewGroupItem ('Missing Files', 'missing_files');
             this.treeView.AddItem (missingFilesItem);
             for (let i = 0; i < missingFiles.length; i++) {
                 let file = missingFiles[i];
                 let item = new OV.TreeViewButtonItem (file);
-                let browseButton = new OV.TreeViewButton ('assets/images/navigator/open.svg');
+                let browseButton = new OV.TreeViewButton ('open');
                 browseButton.OnClick (() => {
                     this.callbacks.openFileBrowserDialog ();
                 });
@@ -170,7 +170,7 @@ OV.Navigator = class
             }
         }
 
-        let materialsItem = new OV.TreeViewGroupItem ('Materials', 'assets/images/navigator/materials.svg');
+        let materialsItem = new OV.TreeViewGroupItem ('Materials', 'materials');
         this.treeView.AddItem (materialsItem);
         for (let i = 0; i < model.MaterialCount (); i++) {
             let material = model.GetMaterial (i);
@@ -185,7 +185,7 @@ OV.Navigator = class
             materialsItem.AddChild (materialItem);
         }
 
-        let meshesItem = new OV.TreeViewGroupItem ('Meshes', 'assets/images/navigator/meshes.svg');
+        let meshesItem = new OV.TreeViewGroupItem ('Meshes', 'meshes');
         this.treeView.AddItem (meshesItem);
         meshesItem.ShowChildren (true, null);
         for (let i = 0; i < model.MeshCount (); i++) {
diff --git a/website/o3dv/js/sidebarpanel.js b/website/o3dv/js/sidebarpanel.js
index 61d9914..9a64066 100644
--- a/website/o3dv/js/sidebarpanel.js
+++ b/website/o3dv/js/sidebarpanel.js
@@ -14,7 +14,7 @@ OV.SidebarPanel = class
         this.titleDiv = $('<div>').addClass ('ov_sidebar_title').appendTo (this.panelDiv);
         this.contentDiv = $('<div>').addClass ('ov_sidebar_content').addClass ('ov_thin_scrollbar').appendTo (this.panelDiv);
         $('<div>').addClass ('ov_sidebar_title_text').html (this.GetTitle ()).appendTo (this.titleDiv);
-        let titleImg = OV.CreateSvgIcon (this.titleDiv, 'assets/images/sidebar/close.svg', 'ov_sidebar_title_img');
+        let titleImg = OV.CreateSvgIcon (this.titleDiv, 'close', 'ov_sidebar_title_img');
         titleImg.click (() => {
             callbacks.onClose ();
         });
diff --git a/website/o3dv/js/toolbar.js b/website/o3dv/js/toolbar.js
index 34c46b8..07d0e9e 100644
--- a/website/o3dv/js/toolbar.js
+++ b/website/o3dv/js/toolbar.js
@@ -13,8 +13,7 @@ OV.ToolbarButton = class
     CreateDomElement (parentDiv)
     {
         this.buttonDiv = $('<div>').addClass ('ov_toolbar_button').appendTo (parentDiv);
-        this.buttonImg = OV.CreateSvgIcon (this.buttonDiv);
-        this.buttonImg.attr ('src', this.image);
+        this.buttonImg = OV.CreateSvgIcon (this.buttonDiv, this.image);
         if (this.onClick !== null) {
             this.buttonDiv.click (this.onClick);
         }
@@ -27,6 +26,21 @@ OV.ToolbarButton = class
         this.buttonDiv.addClass (className);
     }
 
+    RemoveClass (className)
+    {
+        this.buttonDiv.removeClass (className);
+    }
+
+    AddImageClass (className)
+    {
+        this.buttonImg.addClass (className);
+    }
+
+    RemoveImageClass (className)
+    {
+        this.buttonImg.removeClass (className);
+    }
+
     SetSelected (selected)
     {
         this.selected = selected;
@@ -36,12 +50,6 @@ OV.ToolbarButton = class
             this.buttonDiv.addClass ('selected');
         }        
     }
-
-    SetImage (image)
-    {
-        this.image = image;
-        this.buttonImg.attr ('src', this.image);
-    }
 };
 
 OV.Toolbar = class
diff --git a/website/o3dv/js/treeview.js b/website/o3dv/js/treeview.js
index 6247f13..3a5004a 100644
--- a/website/o3dv/js/treeview.js
+++ b/website/o3dv/js/treeview.js
@@ -18,7 +18,7 @@ OV.TreeViewButton = class
     SetImage (imagePath)
     {
         this.imagePath = imagePath;
-        this.domElement.attr ('src', this.imagePath);
+        OV.SetSvgIconImage (this.domElement, this.imagePath);
     }
 
     OnClick (clickHandler)
@@ -147,8 +147,8 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
         this.childrenDiv = null;
         this.showChildren = false;
         this.openCloseButton = null;
-        this.openButtonPath = 'assets/images/navigator/arrow_down.svg';
-        this.closeButtonPath = 'assets/images/navigator/arrow_up.svg';
+        this.openButtonIcon = 'arrow_down';
+        this.closeButtonIcon = 'arrow_up';
         this.animated = true;
         this.openCloseHandler = null;
     }
@@ -180,7 +180,7 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
             return;
         }
         if (show) {
-            this.openCloseButton.attr ('src', this.openButtonPath);
+            OV.SetSvgIconImage (this.openCloseButton, this.openButtonIcon);
             if (this.animated) {
                 this.childrenDiv.slideDown (400, onComplete);
             } else {
@@ -190,7 +190,7 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
                 }
             }
         } else {
-            this.openCloseButton.attr ('src', this.closeButtonPath);
+            OV.SetSvgIconImage (this.openCloseButton, this.closeButtonIcon);
             if (this.animated) {
                 this.childrenDiv.slideUp (400, onComplete);
             } else {
@@ -236,7 +236,7 @@ OV.TreeViewGroupItem = class extends OV.TreeViewItem
         this.CreateMainElement (parentDiv);
         OV.CreateSvgIcon (this.mainElement, this.iconPath, 'ov_tree_item_icon');
         let buttonContainer = $('<div>').addClass ('ov_tree_item_button_container').appendTo (this.mainElement);
-        this.openCloseButton = OV.CreateSvgIcon (buttonContainer, this.openButtonPath, 'ov_tree_item_button');
+        this.openCloseButton = OV.CreateSvgIcon (buttonContainer, this.openButtonIcon, 'ov_tree_item_button');
         this.CreateNameElement ();
     }
 };
diff --git a/website/o3dv/js/utils.js b/website/o3dv/js/utils.js
index b70c840..14cdf06 100644
--- a/website/o3dv/js/utils.js
+++ b/website/o3dv/js/utils.js
@@ -116,36 +116,30 @@ OV.DownloadArrayBufferAsFile = function (arrayBuffer, fileName)
     OV.DownloadUrlAsFile (url, fileName);
 };
 
-OV.CreateSvgIcon = function (parent, sourceImage, extraClass)
+OV.CreateSvgIcon = function (parent, iconName, extraClass)
 {
-    let img = $('<img>').addClass ('ov_svg_icon').appendTo (parent);
-    if (sourceImage !== undefined && sourceImage !== null) {
-        img.attr ('src', sourceImage);
-    }
+    let div = $('<div>').addClass ('ov_svg_icon').appendTo (parent);
+    $('<i>').addClass ('icon').addClass ('icon-' + iconName).appendTo (div);
     if (extraClass !== undefined && extraClass !== null) {
-        img.addClass (extraClass);
+        div.addClass (extraClass);
     }
-    return img;
+    return div;
 };
 
-OV.CreateHeaderButton = function (iconName, hoverIconName, title, link)
+OV.SetSvgIconImage = function (icon, iconName)
+{
+    icon.empty ();
+    $('<i>').addClass ('icon').addClass ('icon-' + iconName).appendTo (icon);
+};
+
+OV.CreateHeaderButton = function (iconName, title, link)
 {
     let buttonLink = $('<a>');
     buttonLink.attr ('href', link);
     buttonLink.attr ('target', '_blank');
     buttonLink.attr ('rel', 'noopener noreferrer');
     OV.InstallTooltip (buttonLink, title);
-    let imgElem = $('<img>').attr ('src', iconName).appendTo (buttonLink);
-    if (hoverIconName !== null && OV.IsHoverEnabled ()) {
-        buttonLink.hover (
-            () => {
-                imgElem.attr ('src', hoverIconName);
-            },
-            () => {
-                imgElem.attr ('src', iconName);
-            }
-        );
-    }
+    OV.CreateSvgIcon (buttonLink, iconName, 'header_button');
     return buttonLink;
 };
 
diff --git a/website/o3dv/js/website.js b/website/o3dv/js/website.js
index c745a2b..2781ae1 100644
--- a/website/o3dv/js/website.js
+++ b/website/o3dv/js/website.js
@@ -157,7 +157,7 @@ OV.Website = class
         if (meshUserData === null) {
             items.push ({
                 name : 'Fit model to window',
-                icon : 'assets/images/context/fit.svg',
+                icon : 'fit',
                 onClick : () => {
                     this.FitModelToWindow (false);
                 }
@@ -165,7 +165,7 @@ OV.Website = class
             if (this.navigator.HasHiddenMesh ()) {
                 items.push ({
                     name : 'Show all meshes',
-                    icon : 'assets/images/context/show.svg',
+                    icon : 'visible',
                     onClick : () => {
                         this.navigator.ShowAllMeshes ();
                     }
@@ -175,14 +175,14 @@ OV.Website = class
             let meshIndex = meshUserData.originalMeshIndex;
             items.push ({
                 name : 'Hide mesh',
-                icon : 'assets/images/context/hide.svg',
+                icon : 'hidden',
                 onClick : () => {
                     this.navigator.ToggleMeshVisibility (meshIndex);
                 }
             });
             items.push ({
                 name : 'Fit mesh to window',
-                icon : 'assets/images/context/fit.svg',
+                icon : 'fit',
                 onClick : () => {
                     this.navigator.FitMeshToWindow (meshIndex);
                 }
@@ -191,7 +191,7 @@ OV.Website = class
                 let isMeshIsolated = this.navigator.IsMeshIsolated (meshIndex);
                 items.push ({
                     name : isMeshIsolated ? 'Remove isolation' : 'Isolate mesh',
-                    icon : isMeshIsolated ? 'assets/images/context/deisolate.svg' : 'assets/images/context/isolate.svg',
+                    icon : isMeshIsolated ? 'deisolate' : 'isolate',
                     onClick : () => {
                         this.navigator.IsolateMesh (meshIndex);
                     }
@@ -317,8 +317,7 @@ OV.Website = class
     {
         function AddButton (toolbar, eventHandler, imageName, imageTitle, onlyFullWidth, onClick)
         {
-            let image = 'assets/images/toolbar/' + imageName + '.svg';
-            let button = toolbar.AddImageButton (image, imageTitle, () => {
+            let button = toolbar.AddImageButton (imageName, imageTitle, () => {
                 eventHandler.HandleEvent ('toolbar_clicked', { item : imageName });
                 onClick ();
             });
@@ -335,7 +334,7 @@ OV.Website = class
                 let imageName = imageNames[i];
                 let imageTitle = imageTitles[i];
                 imageData.push ({
-                    image : 'assets/images/toolbar/' + imageName + '.svg',
+                    image : imageName,
                     title : imageTitle
                 });
             }
@@ -476,8 +475,7 @@ OV.Website = class
     {
         function AddSidebarButton (toolbar, eventHandler, sidebarPanel, onClick)
         {
-            let image = 'assets/images/toolbar/' + sidebarPanel.image + '.svg';
-            let button = toolbar.AddImageButton (image, sidebarPanel.title, () => {
+            let button = toolbar.AddImageButton (sidebarPanel.image, sidebarPanel.title, () => {
                 eventHandler.HandleEvent ('sidebar_clicked', { item : sidebarPanel.image });
                 onClick ();
             });
@@ -492,11 +490,9 @@ OV.Website = class
             for (let i = 0; i < sidebarPanels.length; i++) {
                 let sidebarPanel = sidebarPanels[i];
                 if (sidebarPanel.panelId === visiblePanelId) {
-                    let image = 'assets/images/toolbar/' + sidebarPanel.image + '_active.svg';
-                    sidebarPanel.button.SetImage (image);
+                    sidebarPanel.button.AddImageClass ('selected');
                 } else {
-                    let image = 'assets/images/toolbar/' + sidebarPanel.image + '.svg';
-                    sidebarPanel.button.SetImage (image);
+                    sidebarPanel.button.RemoveImageClass ('selected');
                 }
             }
         }