From e33e61e37a77db7e8142faf07025d6df803a0bf7 Mon Sep 17 00:00:00 2001
From: Robin Davies <rerdavies@gmail.com>
Date: Wed, 28 Jun 2023 04:48:35 -0400
Subject: [PATCH] Dark Moded interrim checkin.

---
 react/package.json                            |   5 +-
 .../drive_file_rename_outline_white_24dp.svg  |   1 +
 react/public/img/edit_banks_white.svg         |  20 ++
 react/public/img/file_download_white_24dp.svg |   1 +
 react/public/img/file_upload_white_24dp.svg   |   1 +
 react/public/img/help_outline_white_24dp.svg  |   1 +
 react/public/img/ic_presets_white.svg         |  12 ++
 react/public/img/save_bank_as_white.svg       |  15 ++
 react/public/img/settings_white_24dp.svg      |   1 +
 react/public/index.html                       |   9 +-
 react/src/App.tsx                             |  32 ++-
 react/src/AppThemed.css                       |   6 +
 react/src/AppThemed.tsx                       |  63 ++++--
 react/src/DarkMode.tsx                        |  26 +++
 react/src/JackHostStatus.tsx                  |  17 +-
 react/src/LoadPluginDialog.tsx                |   2 +-
 react/src/Lv2Plugin.tsx                       |  14 +-
 react/src/PedalboardView.tsx                  |  35 ++--
 react/src/PluginIcon.tsx                      | 147 ++++++++++++-
 react/src/PluginInfoDialog.tsx                |   2 +-
 react/src/PluginPresetsDialog.tsx             |   5 +-
 react/src/PresetDialog.tsx                    |  17 +-
 react/src/PresetSelector.tsx                  |  77 +++----
 react/src/SettingsDialog.tsx                  |  11 +-
 react/src/TemporaryDrawer.tsx                 |  14 +-
 react/src/svg/fx_amplifier.svg                |  20 ++
 react/src/svg/fx_analyzer.svg                 |  16 ++
 react/src/svg/fx_chorus.svg                   |  72 +++++++
 react/src/svg/fx_compressor.svg               |  20 ++
 react/src/svg/fx_constant.svg                 |  28 +++
 react/src/svg/fx_converter.svg                |  19 ++
 react/src/svg/fx_delay.svg                    |  22 ++
 react/src/svg/fx_dial.svg                     |  14 ++
 react/src/svg/fx_distortion.svg               |  42 ++++
 react/src/svg/fx_empty.svg                    |   6 +
 react/src/svg/fx_eq.svg                       |  20 ++
 react/src/svg/fx_error.svg                    |  11 +
 react/src/svg/fx_filter.svg                   |  20 ++
 react/src/svg/fx_filter_hp.svg                |  19 ++
 react/src/svg/fx_flanger.svg                  |  45 ++++
 react/src/svg/fx_flanger2.svg                 | 194 ++++++++++++++++++
 react/src/svg/fx_function.svg                 |  41 ++++
 react/src/svg/fx_gate.svg                     |  16 ++
 react/src/svg/fx_generator.svg                |  41 ++++
 react/src/svg/fx_instrument.svg               |  33 +++
 react/src/svg/fx_limiter.svg                  |  15 ++
 react/src/svg/fx_lr.svg                       |  19 ++
 react/src/svg/fx_mixer.svg                    |  37 ++++
 react/src/svg/fx_modulator.svg                |  75 +++++++
 react/src/svg/fx_oscillator.svg               |  30 +++
 react/src/svg/fx_parametric_eq.svg            |  15 ++
 react/src/svg/fx_phaser.svg                   |  22 ++
 react/src/svg/fx_pitch.svg                    |  28 +++
 react/src/svg/fx_plugin.svg                   |  22 ++
 react/src/svg/fx_reverb.svg                   |  57 +++++
 react/src/svg/fx_simulator.svg                |  19 ++
 react/src/svg/fx_spatial.svg                  |  30 +++
 react/src/svg/fx_spectral.svg                 |  25 +++
 react/src/svg/fx_split_a.svg                  |  18 ++
 react/src/svg/fx_split_b.svg                  |  23 +++
 react/src/svg/fx_terminal.svg                 |   9 +
 react/src/svg/fx_utility.svg                  |  19 ++
 62 files changed, 1568 insertions(+), 128 deletions(-)
 create mode 100644 react/public/img/drive_file_rename_outline_white_24dp.svg
 create mode 100644 react/public/img/edit_banks_white.svg
 create mode 100644 react/public/img/file_download_white_24dp.svg
 create mode 100644 react/public/img/file_upload_white_24dp.svg
 create mode 100644 react/public/img/help_outline_white_24dp.svg
 create mode 100644 react/public/img/ic_presets_white.svg
 create mode 100644 react/public/img/save_bank_as_white.svg
 create mode 100644 react/public/img/settings_white_24dp.svg
 create mode 100644 react/src/DarkMode.tsx
 create mode 100644 react/src/svg/fx_amplifier.svg
 create mode 100644 react/src/svg/fx_analyzer.svg
 create mode 100644 react/src/svg/fx_chorus.svg
 create mode 100644 react/src/svg/fx_compressor.svg
 create mode 100644 react/src/svg/fx_constant.svg
 create mode 100644 react/src/svg/fx_converter.svg
 create mode 100644 react/src/svg/fx_delay.svg
 create mode 100644 react/src/svg/fx_dial.svg
 create mode 100644 react/src/svg/fx_distortion.svg
 create mode 100644 react/src/svg/fx_empty.svg
 create mode 100644 react/src/svg/fx_eq.svg
 create mode 100644 react/src/svg/fx_error.svg
 create mode 100644 react/src/svg/fx_filter.svg
 create mode 100755 react/src/svg/fx_filter_hp.svg
 create mode 100644 react/src/svg/fx_flanger.svg
 create mode 100644 react/src/svg/fx_flanger2.svg
 create mode 100644 react/src/svg/fx_function.svg
 create mode 100644 react/src/svg/fx_gate.svg
 create mode 100644 react/src/svg/fx_generator.svg
 create mode 100644 react/src/svg/fx_instrument.svg
 create mode 100644 react/src/svg/fx_limiter.svg
 create mode 100644 react/src/svg/fx_lr.svg
 create mode 100644 react/src/svg/fx_mixer.svg
 create mode 100644 react/src/svg/fx_modulator.svg
 create mode 100644 react/src/svg/fx_oscillator.svg
 create mode 100755 react/src/svg/fx_parametric_eq.svg
 create mode 100644 react/src/svg/fx_phaser.svg
 create mode 100644 react/src/svg/fx_pitch.svg
 create mode 100644 react/src/svg/fx_plugin.svg
 create mode 100644 react/src/svg/fx_reverb.svg
 create mode 100644 react/src/svg/fx_simulator.svg
 create mode 100644 react/src/svg/fx_spatial.svg
 create mode 100644 react/src/svg/fx_spectral.svg
 create mode 100644 react/src/svg/fx_split_a.svg
 create mode 100644 react/src/svg/fx_split_b.svg
 create mode 100644 react/src/svg/fx_terminal.svg
 create mode 100644 react/src/svg/fx_utility.svg

diff --git a/react/package.json b/react/package.json
index 2d74128..808df36 100644
--- a/react/package.json
+++ b/react/package.json
@@ -22,7 +22,10 @@
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6",
     "typescript": "^4.3.4",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^1.1.2",
+
+    "@babel/plugin-proposal-private-property-in-object": "^9.7.2" 
+
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/react/public/img/drive_file_rename_outline_white_24dp.svg b/react/public/img/drive_file_rename_outline_white_24dp.svg
new file mode 100644
index 0000000..d1525a7
--- /dev/null
+++ b/react/public/img/drive_file_rename_outline_white_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><g><rect fill="none" height="24" width="24"/></g><g><g><polygon points="15,16 11,20 21,20 21,16"/><path d="M12.06,7.19L3,16.25V20h3.75l9.06-9.06L12.06,7.19z M5.92,18H5v-0.92l7.06-7.06l0.92,0.92L5.92,18z"/><path d="M18.71,8.04c0.39-0.39,0.39-1.02,0-1.41l-2.34-2.34C16.17,4.09,15.92,4,15.66,4c-0.25,0-0.51,0.1-0.7,0.29l-1.83,1.83 l3.75,3.75L18.71,8.04z"/></g></g></svg>
\ No newline at end of file
diff --git a/react/public/img/edit_banks_white.svg b/react/public/img/edit_banks_white.svg
new file mode 100644
index 0000000..140c557
--- /dev/null
+++ b/react/public/img/edit_banks_white.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#FFFFFF">
+<rect x="6" y="9" width="2" height="2"/>
+<rect x="6" y="13" width="2" height="2"/>
+<rect x="6" y="17" width="2" height="2"/>
+<rect x="10" y="17" width="3" height="2"/>
+<g>
+	<g>
+		<path d="M17.059,5.19l-7.061,7.06V16h3.75l7.061-7.061L17.059,5.19z M12.918,14h-0.92v-0.92l5.061-5.061l0.92,0.92L12.918,14z"/>
+		<path d="M23.708,6.04c0.39-0.39,0.39-1.02,0-1.41l-2.34-2.34c-0.2-0.2-0.45-0.29-0.71-0.29c-0.25,0-0.51,0.1-0.7,0.29l-1.83,1.83
+			l3.75,3.75L23.708,6.04z"/>
+	</g>
+</g>
+<path d="M15,16.641V21H4v-9V7h5h1h3.672l1.904-1.904C15.393,5.04,15.202,5,15,5h-4H8H4C2.9,5,2.01,5.9,2.01,7l-0.003,3.993L2,11v10
+	c0,1.1,0.891,2,1.99,2H4h11h0.01c1.1,0,1.99-0.9,1.99-2v-6.359L15,16.641z"/>
+<polygon points="11.672,9 10,9 10,10.672 "/>
+</svg>
diff --git a/react/public/img/file_download_white_24dp.svg b/react/public/img/file_download_white_24dp.svg
new file mode 100644
index 0000000..c2be6df
--- /dev/null
+++ b/react/public/img/file_download_white_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
\ No newline at end of file
diff --git a/react/public/img/file_upload_white_24dp.svg b/react/public/img/file_upload_white_24dp.svg
new file mode 100644
index 0000000..7f1f497
--- /dev/null
+++ b/react/public/img/file_upload_white_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M7,9l1.41,1.41L11,7.83V16h2V7.83l2.59,2.58L17,9l-5-5L7,9z"/></g></svg>
\ No newline at end of file
diff --git a/react/public/img/help_outline_white_24dp.svg b/react/public/img/help_outline_white_24dp.svg
new file mode 100644
index 0000000..9c1a3b8
--- /dev/null
+++ b/react/public/img/help_outline_white_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
\ No newline at end of file
diff --git a/react/public/img/ic_presets_white.svg b/react/public/img/ic_presets_white.svg
new file mode 100644
index 0000000..931ebb2
--- /dev/null
+++ b/react/public/img/ic_presets_white.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#FFFFFF">
+<path d="M20.953,7.993L20.949,4c0-1.1-0.891-2-1.99-2h-4h-3h-3c-1.1,0-1.99,0.9-1.99,2h1.99h4h1h5h0.006v16h0.004
+	c1.1,0,1.99-0.9,1.99-2V8L20.953,7.993z"/>
+<path d="M17.993,10.993L17.99,7c0-1.1-0.891-2-1.99-2h-4H9H6C4.9,5,4.01,5.9,4.01,7l-0.003,3.993L4,11v10c0,1.1,0.891,2,1.99,2H6h10
+	h0.01c1.1,0,1.99-0.9,1.99-2V11L17.993,10.993z M16,12v9H6v-9V7h4h1h5V12z"/>
+<rect x="8" y="9" width="6" height="2"/>
+<circle cx="11" cy="15.859" r="2"/>
+</svg>
diff --git a/react/public/img/save_bank_as_white.svg b/react/public/img/save_bank_as_white.svg
new file mode 100644
index 0000000..41e5755
--- /dev/null
+++ b/react/public/img/save_bank_as_white.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#FFFFFF">
+<path d="M16,1H4C2.9,1,2,1.9,2,3v14h2V3h12V1z"/>
+<path d="M20.993,10.993L20.99,7c0-1.1-0.891-2-1.99-2h-4h-3H8C6.9,5,6.01,5.9,6.01,7l-0.003,3.993L6,11v10c0,1.1,0.891,2,1.99,2H8
+	h11h0.01c1.1,0,1.99-0.9,1.99-2V11L20.993,10.993z M19,12v9H8v-9V7h5h1h5V12z"/>
+<rect x="10" y="9" width="2" height="2"/>
+<rect x="14" y="9" width="3" height="2"/>
+<rect x="10" y="13" width="2" height="2"/>
+<rect x="14" y="13" width="3" height="2"/>
+<rect x="10" y="17" width="2" height="2"/>
+<rect x="14" y="17" width="3" height="2"/>
+</svg>
diff --git a/react/public/img/settings_white_24dp.svg b/react/public/img/settings_white_24dp.svg
new file mode 100644
index 0000000..1dbcba0
--- /dev/null
+++ b/react/public/img/settings_white_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>
\ No newline at end of file
diff --git a/react/public/index.html b/react/public/index.html
index 3efcea9..3562313 100644
--- a/react/public/index.html
+++ b/react/public/index.html
@@ -30,8 +30,15 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>PiPedal</title>
+    <style>
+      BODY { background: #D0D0D0; }
+      @media (prefers-color-scheme: dark) {
+        BODY { background: #333; }
+      }
+
+    </style>
   </head>
-  <body style="background: #D0D0D0">
+  <body >
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/react/src/App.tsx b/react/src/App.tsx
index fb590a7..299bba8 100644
--- a/react/src/App.tsx
+++ b/react/src/App.tsx
@@ -21,6 +21,7 @@ import React from 'react';
 import { ThemeProvider, createTheme, StyledEngineProvider, Theme } from '@mui/material/styles';
 
 import AppThemed from "./AppThemed";
+import isDarkMode from './DarkMode';
 
 
 
@@ -33,16 +34,31 @@ declare module '@mui/styles/defaultTheme' {
 
 
 
-const theme = createTheme({
-    palette: {
-        primary: {
-            main: "#6750A4"   // #5B5690  #60529A  #5C5694
-        },
-        secondary: {
-            main: "#FF6060"
+const theme = createTheme(
+    isDarkMode() ?
+        {
+        palette: {
+            mode: 'dark',
+            primary: {
+                main: "#6750A4"   // #5B5690  #60529A  #5C5694
+            },
+            secondary: {
+                main: "#FF6060"
+            }
         }
     }
-});
+        :
+        {
+        palette: {
+            primary: {
+                main: "#6750A4"   // #5B5690  #60529A  #5C5694
+            },
+            secondary: {
+                main: "#FF6060"
+            }
+        }
+    }
+);
 
 
 
diff --git a/react/src/AppThemed.css b/react/src/AppThemed.css
index d169d81..51f7afa 100644
--- a/react/src/AppThemed.css
+++ b/react/src/AppThemed.css
@@ -15,3 +15,9 @@
 div {
     min-width: 0;
   }
+
+@media (prefers-color-scheme: dark) {
+    :root {
+    color-scheme: dark;
+    }
+}
\ No newline at end of file
diff --git a/react/src/AppThemed.tsx b/react/src/AppThemed.tsx
index d1195c3..b47ecf0 100644
--- a/react/src/AppThemed.tsx
+++ b/react/src/AppThemed.tsx
@@ -60,10 +60,20 @@ import { BankIndex, BankIndexEntry } from './Banks';
 import RenameDialog from './RenameDialog';
 import JackStatusView from './JackStatusView';
 import { Theme } from '@mui/material/styles';
+import isDarkMode from './DarkMode';
+
 
 
 
 const appStyles = (theme: Theme) => createStyles({
+    menuIcon: {
+        fill: "green"
+    },
+    appBar: {
+    },
+    listSubheader: {
+        backgroundImage: "linear-gradient(255,255,255,0.15),rgba(255,255,255,0.15)"
+    },
     loadingContent: {
         display: "block",
         position: "absolute",
@@ -72,7 +82,7 @@ const appStyles = (theme: Theme) => createStyles({
         top: "0px",
         width: "100%",
         height: "100%",
-        background: "#DDD",
+        background: isDarkMode() ? "#222": "#DDD",
         opacity: "0.95",
         justifyContent: "center",
         textAlign: "center",
@@ -91,13 +101,13 @@ const appStyles = (theme: Theme) => createStyles({
         top: "0px",
         width: "100%",
         height: "100%",
-        color: "#444",
+        color: isDarkMode() ? "#CCC": "#444",
         zIndex: 2000
     },
     errorContentMask: {
         position: "absolute", left: 0, top: 0,
         width: "100%", height: "100%",
-        background: "#BBB",
+        background: isDarkMode()? "#121212": "#BBB",
         opacity: 0.95,
         zIndex: 1999
     },
@@ -131,7 +141,7 @@ const appStyles = (theme: Theme) => createStyles({
 
     },
     errorMessage: {
-        color: '#000',
+        color: theme.palette.text.secondary,
         textAlign: "left",
         zIndex: 2010
 
@@ -140,7 +150,7 @@ const appStyles = (theme: Theme) => createStyles({
         position: "relative",
         top: "20%",
         width: "240px",
-        color: "#888",
+        color: isDarkMode() ? theme.palette.text.secondary : "#888",
         marginLeft: "auto",
         marginRight: "auto",
         // border: "3px solid #888",
@@ -167,7 +177,7 @@ const appStyles = (theme: Theme) => createStyles({
 
     toolBarSpacer:
     {
-        position: "relative", flex: "0 0 auto"
+        position: "relative", flex: "0 0 auto",
     },
 
 
@@ -190,7 +200,7 @@ const appStyles = (theme: Theme) => createStyles({
     },
 
     heroContent: {
-        backgroundColor: "#FFFFFF",
+        backgroundColor: isDarkMode()? theme.palette.background.default: "#FFFFFF",
         position: "relative",
         height: "100%",
         width: "100%"
@@ -198,7 +208,6 @@ const appStyles = (theme: Theme) => createStyles({
 
     drawerItem: {
         width: 350,
-        background: "#FF8080"
     },
     drawerItemFullWidth: {
         width: 'auto',
@@ -657,7 +666,7 @@ render() {
             <CssBaseline />
             {(!this.state.tinyToolBar) ?
                 (
-                    <AppBar position="absolute" style={{ background: "white" }}>
+                    <AppBar className="appBar" position="absolute" >
                         <Toolbar variant="dense"   >
                             <IconButton
                                 edge="start"
@@ -714,9 +723,10 @@ render() {
                 )}
             <TemporaryDrawer position='left' title="PiPedal"
                 is_open={this.state.isDrawerOpen} onClose={() => { this.hideDrawer(); }} >
-                <List subheader={
-                    <ListSubheader component="div" id="nested-list-subheader">Banks</ListSubheader>
-                }>
+                <ListSubheader className="listSubheader" component="div" id="xnested-list-subheader" style={{background: "rgba(12,12,12,0.0)"}}>
+                    <Typography variant="caption" style={{position: "relative", top: 15}}>Banks</Typography></ListSubheader>
+
+                <List >
                     {
                         shortBankList.map((bank) => {
                             return (
@@ -746,18 +756,26 @@ render() {
                 <Divider />
                 <List>
                     <ListItem button key='RenameBank' onClick={() => { this.handleDrawerRenameBank() }}>
-                        <ListItemIcon><img src="img/drive_file_rename_outline_black_24dp.svg" alt="" style={{ opacity: 0.6 }} /></ListItemIcon>
+                        <ListItemIcon>
+                            <img className='menuIcon' 
+                                src={isDarkMode()? "img/drive_file_rename_outline_white_24dp.svg" :"img/drive_file_rename_outline_black_24dp.svg"} 
+                                alt="" style={{ opacity: 0.6 }} />
+                        </ListItemIcon>
                         <ListItemText primary='Rename Bank' />
                     </ListItem>
                     <ListItem button key='SaveBank' onClick={() => { this.handleDrawerSaveBankAs() }} >
                         <ListItemIcon>
-                            <img src="img/save_bank_as.svg" alt="" style={{ opacity: 0.6 }} />
+                            <img className='menuIcon' 
+                                src={isDarkMode()? "img/save_bank_as_white.svg" :"img/save_bank_as.svg"} 
+                                alt="" style={{ opacity: 0.6 }} />
                         </ListItemIcon>
                         <ListItemText primary='Save As New Bank' />
                     </ListItem>
                     <ListItem button key='CreateBank' onClick={() => { this.handleDrawerManageBanks(); }}>
                         <ListItemIcon>
-                            <img src="img/edit_banks.svg" alt="" style={{ opacity: 0.6 }} />
+                            <img className='menuIcon' 
+                                src={isDarkMode()? "img/edit_banks_white.svg" :"img/edit_banks.svg"} 
+                                alt="" style={{ opacity: 0.6 }} />
                         </ListItemIcon>
                         <ListItemText primary='Manage Banks...' />
                     </ListItem>
@@ -766,19 +784,23 @@ render() {
                 <List>
                     <ListItem button key='Settings' onClick={() => { this.handleDrawerSettingsClick() }}>
                         <ListItemIcon>
-                            <img src="img/settings_black_24dp.svg" alt="" style={{ opacity: 0.6 }} />
+                            <img className='menuIcon' 
+                            src={isDarkMode()? "img/settings_white_24dp.svg" :"img/settings_black_24dp.svg"} 
+                             alt="" style={{ opacity: 0.6 }} />
                         </ListItemIcon>
                         <ListItemText primary='Settings' />
                     </ListItem>
                     <ListItem button key='About' onClick={() => { this.handleDrawerAboutClick() }}>
                         <ListItemIcon>
-                            <img src="img/help_outline_black_24dp.svg" alt="" style={{ opacity: 0.6 }} />
+                            <img className='menuIcon' 
+                                src= {isDarkMode() ? "img/help_outline_white_24dp.svg": "img/help_outline_black_24dp.svg"}
+                                 alt="" style={{ opacity: 0.6 }} />
                         </ListItemIcon>
                         <ListItemText primary='About' />
                     </ListItem>
                     <ListItem button key='Donations' onClick={() => { this.handleDrawerDonationClick() }}>
                         <ListItemIcon>
-                            <VolunteerActivismIcon />
+                            <VolunteerActivismIcon style={{ opacity: 0.6 }}/>
                         </ListItemIcon>
                         <ListItemText primary='Donations' />
                     </ListItem>
@@ -786,7 +808,8 @@ render() {
 
             </TemporaryDrawer>
             {!this.state.tinyToolBar && (
-                <Toolbar className={classes.toolBarSpacer} variant="dense" />
+                <Toolbar className={classes.toolBarSpacer} variant="dense"  
+                />
             )}
             <main className={classes.mainFrame} >
                 <div className={classes.mainSizingPosition}>
@@ -807,7 +830,7 @@ render() {
             <RenameDialog
                 open={this.state.renameBankDialogOpen || this.state.saveBankAsDialogOpen}
                 defaultName={this.model_.banks.get().getSelectedEntryName()}
-                acceptActionName={"Rename"}
+                acceptActionName={this.state.renameBankDialogOpen ? "Rename": "Save as"}
                 onClose={() => {
                     this.setState({
                         renameBankDialogOpen: false,
diff --git a/react/src/DarkMode.tsx b/react/src/DarkMode.tsx
new file mode 100644
index 0000000..06b6c05
--- /dev/null
+++ b/react/src/DarkMode.tsx
@@ -0,0 +1,26 @@
+// Copyright (c) 2022 Robin Davies
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy of
+// this software and associated documentation files (the "Software"), to deal in
+// the Software without restriction, including without limitation the rights to
+// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+// the Software, and to permit persons to whom the Software is furnished to do so,
+// subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+
+export default function isDarkMode(): boolean {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return true;
+    }
+    return false;
+}
diff --git a/react/src/JackHostStatus.tsx b/react/src/JackHostStatus.tsx
index 7adbd4d..cf47973 100644
--- a/react/src/JackHostStatus.tsx
+++ b/react/src/JackHostStatus.tsx
@@ -19,10 +19,11 @@
 
 import React from 'react';
 import Typography from '@mui/material/Typography';
+import isDarkMode from './DarkMode';
 
 
 const RED_COLOR = "#C00";
-const GREEN_COLOR = "#666";
+const GREEN_COLOR = isDarkMode()? "rgba(255,255,255,0.7)": "#666";
 
 
 
@@ -85,13 +86,13 @@ export default class JackHostStatus {
     static getCpuInfo(label: string, status?: JackHostStatus): React.ReactNode {
         if (!status) {
             return (<div style={{ whiteSpace: "nowrap" }}>
-                <Typography variant="caption" color="textSecondary">{label}</Typography>
+                <Typography variant="caption" color="inherit">{label}</Typography>
                 <Typography variant="caption">&nbsp;</Typography>
             </div>);
         }
         return (<div style={{ whiteSpace: "nowrap" }}>
-            <Typography variant="caption" color="textSecondary">{label}</Typography>
-            <Typography variant="caption" color="textSecondary">
+            <Typography variant="caption" color="inherit">{label}</Typography>
+            <Typography variant="caption" color="inherit">
                 {
                     (status.cpuFreqMax === status.cpuFreqMin)?
                     (
@@ -110,14 +111,14 @@ export default class JackHostStatus {
     static getDisplayView(label: string, status?: JackHostStatus): React.ReactNode {
         if (!status) {
             return (<div style={{ whiteSpace: "nowrap" }}>
-                <Typography variant="caption" color="textSecondary">{label}</Typography>
+                <Typography variant="caption" color="inherit">{label}</Typography>
                 <Typography variant="caption">&nbsp;</Typography>
             </div>);
         }
         if (status.restarting) {
             return (
                 <div style={{ whiteSpace: "nowrap" }}>
-                    <Typography variant="caption" color="textSecondary">{label}</Typography>
+                    <Typography variant="caption" color="inherit">{label}</Typography>
                     <span style={{ color: RED_COLOR }}>
                         <Typography variant="caption" color="inherit">Restarting&nbsp;&nbsp;</Typography>
                     </span>
@@ -135,7 +136,7 @@ export default class JackHostStatus {
         } else if (!status.active) {
             return (
                 <div style={{ whiteSpace: "nowrap" }}>
-                    <Typography variant="caption" color="textSecondary">{label}</Typography>
+                    <Typography variant="caption" color="inherit">{label}</Typography>
 
                     <span style={{ color: RED_COLOR }}>
                         <Typography variant="caption" color="inherit">{status.errorMessage === "" ? "Stopped" : status.errorMessage}&nbsp;&nbsp;</Typography>
@@ -154,7 +155,7 @@ export default class JackHostStatus {
             let underrunError = status.msSinceLastUnderrun < 15 * 1000;
             return (
                 <div style={{ whiteSpace: "nowrap" }}>
-                    <Typography variant="caption" color="textSecondary">{label}</Typography>
+                    <Typography variant="caption" color="inherit">{label}</Typography>
                     <span style={{ color: underrunError ? RED_COLOR : GREEN_COLOR }}>
                         <Typography variant="caption" color="inherit">
                             XRuns:&nbsp;{status.underruns + ""}&nbsp;&nbsp;
diff --git a/react/src/LoadPluginDialog.tsx b/react/src/LoadPluginDialog.tsx
index 54005fc..e4edb29 100644
--- a/react/src/LoadPluginDialog.tsx
+++ b/react/src/LoadPluginDialog.tsx
@@ -602,7 +602,7 @@ export const LoadPluginDialog =
                             <SelectHoverBackground selected={value.uri === this.state.selected_uri} showHover={true} />
                             <div className={classes.content}>
                                 <div className={classes.iconBorder} >
-                                    <PluginIcon pluginType={value.plugin_type} pluginUri={value.uri} size={24} />
+                                    <PluginIcon pluginType={value.plugin_type} size={24} />
                                 </div>
                                 <div className={classes.content2}>
                                     <div className={classes.label} style={{ display: "flex", flexFlow: "row nowrap", alignItems: "center" }} >
diff --git a/react/src/Lv2Plugin.tsx b/react/src/Lv2Plugin.tsx
index 8f24139..39f4ec9 100644
--- a/react/src/Lv2Plugin.tsx
+++ b/react/src/Lv2Plugin.tsx
@@ -375,7 +375,19 @@ export enum PluginType {
     WaveshaperPlugin = "WaveshaperPlugin",
 
         // psuedo plugin type for the Amps node of the filter dialog.
-    PiPedalAmpsNode = "PiPedalAmpsNode"
+    PiPedalAmpsNode = "PiPedalAmpsNode",
+
+    // pseudo plugin types for splitter.
+    SplitA = "SplitA",
+    SplitB = "SplitB",   //"img/fx_split_b.svg";
+    SplitMix = "SplitMix", //SplitMix; //"img/fx_dial.svg";
+    SplitLR = "SplitLR", //"img/fx_dial.svg";
+
+
+
+    // psuedo plugin type for misc icons.
+    ErrorPlugin = "ErrorPlugin",
+    Terminal = "Terminal", //"img/fx_terminal.svg"; 
 
 }
 
diff --git a/react/src/PedalboardView.tsx b/react/src/PedalboardView.tsx
index 4ff409d..da5e067 100644
--- a/react/src/PedalboardView.tsx
+++ b/react/src/PedalboardView.tsx
@@ -26,13 +26,14 @@ import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
 import { PluginType } from './Lv2Plugin';
 import ButtonBase from '@mui/material/ButtonBase';
 import Typography from '@mui/material/Typography';
-import { SelectIcon } from './PluginIcon';
+import PluginIcon, {SelectIconUri} from './PluginIcon';
 import { SelectHoverBackground } from './SelectHoverBackground';
 import SvgPathBuilder from './SvgPathBuilder';
 import Draggable from './Draggable'
 import Rect from './Rect';
 import {PiPedalStateError} from './PiPedalError';
-import Utility from './Utility'
+import Utility from './Utility';
+
 import {
     Pedalboard, PedalboardItem, PedalboardSplitItem, SplitType
 } from './Pedalboard';
@@ -237,6 +238,7 @@ class PedalLayout {
     static Start(): PedalLayout {
         let t: PedalLayout = new PedalLayout();
         t.uri = START_PEDALBOARD_ITEM_URI;
+        t.pluginType = PluginType.Terminal;
         t.iconUrl = TERMINAL_ICON_URL;
         t.numberOfInputs = 0;
         t.numberOfOutputs = 2;
@@ -244,7 +246,7 @@ class PedalLayout {
     }
     static End(): PedalLayout {
         let t: PedalLayout = new PedalLayout();
-        t.pluginType = PluginType.UtilityPlugin;
+        t.pluginType = PluginType.Terminal;
         t.uri = END_PEDALBOARD_ITEM_URI;
         t.iconUrl = TERMINAL_ICON_URL;
         t.numberOfInputs = 2;
@@ -272,7 +274,7 @@ class PedalLayout {
 
         } else if (pedalItem.isEmpty()) {
 
-            this.pluginType = PluginType.UtilityPlugin;
+            this.pluginType = PluginType.None;
             this.iconUrl = EMPTY_ICON_URL;
             this.numberOfInputs = 2;
             this.numberOfOutputs = 2;
@@ -293,13 +295,13 @@ class PedalLayout {
             let uiPlugin = model.getUiPlugin(pedalItem.uri);
             if (uiPlugin != null) {
                 this.pluginType = uiPlugin.plugin_type;
-                this.iconUrl = SelectIcon(uiPlugin.plugin_type,uiPlugin.uri);
+                this.iconUrl = SelectIconUri(uiPlugin.plugin_type);
                 this.name = uiPlugin.name;
                 this.numberOfInputs = Math.max(uiPlugin.audio_inputs,2);
                 this.numberOfOutputs = Math.max(uiPlugin.audio_outputs,2);
             } else {
                 // default to empty plugin.
-                this.pluginType = PluginType.UtilityPlugin;
+                this.pluginType = PluginType.ErrorPlugin;
                 this.name = pedalItem.pluginName??"#error";
                 this.iconUrl = ERROR_ICON_URL;
                 this.numberOfInputs = 2;
@@ -525,22 +527,22 @@ const PedalboardView =
                 }
             }
 
-            getSplitterIcon(layoutItem: PedalLayout) {
+            getSplitterIcon(layoutItem: PedalLayout): PluginType {
                 if (layoutItem.pedalItem === undefined) {
                     throw new Error("Invalid splitter");
                 }
                 let split = layoutItem.pedalItem as PedalboardSplitItem;
                 if (split.getSplitType() === SplitType.Ab) {
                     if (split.isASelected()) {
-                        return "img/fx_split_a.svg";
+                        return PluginType.SplitA;
                     } else {
-                        return "img/fx_split_b.svg";
+                        return PluginType.SplitB;
 
                     }
                 } else if (split.getSplitType() === SplitType.Mix) {
-                    return "img/fx_dial.svg";
+                    return PluginType.SplitMix; //"img/fx_dial.svg";
                 } else {
-                    return "img/fx_lr.svg";
+                    return PluginType.SplitLR; //"img/fx_lr.svg";
                 }
             }
 
@@ -903,7 +905,7 @@ const PedalboardView =
                 throw new PiPedalStateError("scroll container not found.");
             }
 
-            pedalButton(instanceId: number, iconUrl: string, draggable: boolean, enabled: boolean,hasBorder: boolean = true): ReactNode {
+            pedalButton(instanceId: number, iconType: PluginType, draggable: boolean, enabled: boolean,hasBorder: boolean = true): ReactNode {
                 let classes = this.props.classes;
                 return (
                     <div className={hasBorder? classes.iconFrame : classes.borderlessIconFrame} onContextMenu={(e) => { e.preventDefault(); }}>
@@ -917,8 +919,7 @@ const PedalboardView =
                                 <Draggable  draggable={draggable} getScrollContainer={() => this.getScrollContainer()}
                                     onDragEnd={(x, y) => { this.onDragEnd(instanceId, x, y) }}
                                 >
-                                    <img src={iconUrl} className={classes.pedalIcon} alt="Pedal" draggable={false} 
-                                    style={{opacity: enabled? 0.99: 0.6}} />
+                                    <PluginIcon pluginType={iconType} size={24} opacity={enabled? 0.99:0.6} />                                    
                                 </Draggable>
                             </SelectHoverBackground>
                         </ButtonBase>
@@ -982,7 +983,7 @@ const PedalboardView =
                             result.push(<div key={this.renderKey++} className={classes.splitItem} style={{ left: item.bounds.x, top: item.bounds.y, width: item.bounds.width }} >
                                 <div className={classes.splitStart} >
 
-                                    {this.pedalButton(START_CONTROL, item.iconUrl, false,true,false)}
+                                    {this.pedalButton(START_CONTROL, item.pluginType,false,true,false)}
                                 </div>
                             </div>);
                             break;
@@ -990,7 +991,7 @@ const PedalboardView =
                             result.push(<div key={this.renderKey++} className={classes.splitItem} style={{ left: item.bounds.x, top: item.bounds.y, width: item.bounds.width }} >
                                 <div className={classes.splitStart} >
 
-                                    {this.pedalButton(END_CONTROL, item.iconUrl, false,true,false)}
+                                    {this.pedalButton(END_CONTROL, item.pluginType, false,true,false)}
                                 </div>
                             </div>);
                             break;
@@ -1015,7 +1016,7 @@ const PedalboardView =
                                     </div>
                                 )
                                 result.push(<div key={this.renderKey++} className={classes.pedalItem} style={{ left: item.bounds.x, top: item.bounds.y }} >
-                                    {this.pedalButton(item.pedalItem?.instanceId ?? -1, item.iconUrl, !item.isEmpty(), item.pedalItem?.isEnabled ?? false)}
+                                    {this.pedalButton(item.pedalItem?.instanceId ?? -1, item.pluginType, !item.isEmpty(), item.pedalItem?.isEnabled ?? false)}
 
                                 </div>);
 
diff --git a/react/src/PluginIcon.tsx b/react/src/PluginIcon.tsx
index 99c70c9..22643e9 100644
--- a/react/src/PluginIcon.tsx
+++ b/react/src/PluginIcon.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 // Copyright (c) 2022 Robin Davies
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy of
@@ -25,21 +26,149 @@ import { PiPedalModelFactory } from "./PiPedalModel";
 import { PluginType } from './Lv2Plugin';
 
 
+import { ReactComponent as FxSimulatorIcon } from './svg/fx_simulator.svg';
+import { ReactComponent as FxPhaserIcon } from './svg/fx_phaser.svg';
+import { ReactComponent as FxFilterIcon } from './svg/fx_filter.svg';
+import { ReactComponent as FxDelayIcon } from './svg/fx_delay.svg';
+
+import { ReactComponent as FxAmplifierIcon } from './svg/fx_amplifier.svg';
+import { ReactComponent as FxChorusIcon } from './svg/fx_chorus.svg';
+import { ReactComponent as FxModulatorIcon } from './svg/fx_modulator.svg';
+import { ReactComponent as FxReverbIcon } from './svg/fx_reverb.svg';
+import { ReactComponent as FxDistortionIcon } from './svg/fx_distortion.svg';
+import { ReactComponent as FxFlangerIcon } from './svg/fx_flanger.svg';
+import { ReactComponent as FxFilterHpIcon } from './svg/fx_filter_hp.svg';
+import { ReactComponent as FxParametricEqIcon } from './svg/fx_parametric_eq.svg';
+import { ReactComponent as FxEqIcon } from './svg/fx_eq.svg';
+import { ReactComponent as FxUtilityIcon } from './svg/fx_utility.svg';
+import { ReactComponent as FxCompressorIcon } from './svg/fx_compressor.svg';
+import { ReactComponent as FxLimiterIcon } from './svg/fx_limiter.svg';
+import { ReactComponent as FxConstantIcon } from './svg/fx_constant.svg';
+import { ReactComponent as FxFunctionIcon } from './svg/fx_function.svg';
+import { ReactComponent as FxGateIcon } from './svg/fx_gate.svg';
+import { ReactComponent as FxConverterIcon } from './svg/fx_converter.svg';
+import { ReactComponent as FxGeneratorIcon } from './svg/fx_generator.svg';
+import { ReactComponent as FxOscillatorIcon } from './svg/fx_oscillator.svg';
+import { ReactComponent as FxInstrumentIcon } from './svg/fx_instrument.svg';
+import { ReactComponent as FxMixerIcon } from './svg/fx_mixer.svg';
+import { ReactComponent as FxPitchIcon } from './svg/fx_pitch.svg';
+import { ReactComponent as FxSpatialIcon } from './svg/fx_spatial.svg';
+import { ReactComponent as FxSpectralIcon } from './svg/fx_spectral.svg';
+import { ReactComponent as FxAnalyzerIcon } from './svg/fx_analyzer.svg';
+import { ReactComponent as FxPluginIcon } from './svg/fx_plugin.svg';
+import { ReactComponent as SplitAIcon } from './svg/fx_split_a.svg';
+import { ReactComponent as SplitBIcon } from './svg/fx_split_b.svg';
+import { ReactComponent as SplitMixIcon } from './svg/fx_dial.svg';
+import { ReactComponent as SplitLrIcon } from './svg/fx_lr.svg';
+import { ReactComponent as FxEmptyIcon } from './svg/fx_empty.svg';
+
+import { ReactComponent as FxTerminalIcon } from './svg/fx_terminal.svg';
+
+
 const styles = (theme: Theme) =>
     createStyles({
         icon: {
             width: "24px",
             height: "24px",
             margin: "0px",
-            opacity: "0.6"
+            opacity: "0.6",
+            color: theme.palette.text.primary,
+            fill: theme.palette.text.primary
         },
     });
 
 export interface PluginIconProps extends WithStyles<typeof styles> {
     size?: number;
+    opacity?: number;
     offsetY?: number;
     pluginType: PluginType;
-    pluginUri: string;
+}
+
+export function SelectSvgIcon(plugin_type: PluginType, className: string, size: number = 24, opacity: number = 1.0) {
+    let myStyle = { width: size, height: size, opacity: opacity };
+    switch (plugin_type) {
+        case PluginType.PhaserPlugin:
+            return <FxPhaserIcon className={className} style={myStyle} />;
+        case PluginType.FilterPlugin:
+            return <FxFilterIcon className={className} style={myStyle} />;
+        case PluginType.DelayPlugin:
+            return <FxDelayIcon className={className} style={myStyle} />;
+        case PluginType.SimulatorPlugin:
+            return <FxSimulatorIcon className={className} style={myStyle} />;
+        case PluginType.AmplifierPlugin:
+            return <FxAmplifierIcon className={className} style={myStyle} />;
+        case PluginType.ChorusPlugin:
+            return <FxChorusIcon className={className} style={myStyle} />;
+        case PluginType.ModulatorPlugin:
+        case PluginType.CombPlugin:
+            return <FxModulatorIcon className={className} style={myStyle} />;
+        case PluginType.ReverbPlugin:
+            return <FxReverbIcon className={className} style={myStyle} />;
+        case PluginType.DistortionPlugin:
+            return <FxDistortionIcon className={className} style={myStyle} />;
+        case PluginType.FlangerPlugin:
+            return <FxFlangerIcon className={className} style={myStyle} />;
+        case PluginType.LowpassPlugin:
+            return <FxFilterIcon className={className} style={myStyle} />;
+        case PluginType.HighpassPlugin:
+            return <FxFilterHpIcon className={className} style={myStyle} />;
+        case PluginType.ParaEQPlugin:
+            return <FxParametricEqIcon className={className} style={myStyle} />;
+        case PluginType.MultiEQPlugin:
+        case PluginType.EQPlugin:
+            return <FxEqIcon className={className} style={myStyle} />;
+        case PluginType.UtilityPlugin:
+            return <FxUtilityIcon className={className} style={myStyle} />;
+        case PluginType.CompressorPlugin:
+        case PluginType.DynamicsPlugin:
+        case PluginType.ExpanderPlugin:
+            return <FxCompressorIcon className={className} style={myStyle} />;
+
+        case PluginType.LimiterPlugin:
+            return <FxLimiterIcon className={className} style={myStyle} />;
+        case PluginType.ConstantPlugin:
+            return <FxConstantIcon className={className} style={myStyle} />;
+        case PluginType.FunctionPlugin:
+        case PluginType.WaveshaperPlugin:
+            return <FxFunctionIcon className={className} style={myStyle} />;
+        case PluginType.GatePlugin:
+            return <FxGateIcon className={className} style={myStyle} />;
+        case PluginType.ConverterPlugin:
+            return <FxConverterIcon className={className} style={myStyle} />;
+        case PluginType.GeneratorPlugin:
+            return <FxGeneratorIcon className={className} style={myStyle} />;
+        case PluginType.OscillatorPlugin:
+            return <FxOscillatorIcon className={className} style={myStyle} />;
+        case PluginType.InstrumentPlugin:
+            return <FxInstrumentIcon className={className} style={myStyle} />;
+        case PluginType.MixerPlugin:
+            return <FxMixerIcon className={className} style={myStyle} />;
+        case PluginType.PitchPlugin:
+            return <FxPitchIcon className={className} style={myStyle} />;
+        case PluginType.SpatialPlugin:
+            return <FxSpatialIcon className={className} style={myStyle} />;
+        case PluginType.SpectralPlugin:
+            return <FxSpectralIcon className={className} style={myStyle} />;
+        case PluginType.AnalyserPlugin:
+            return <FxAnalyzerIcon className={className} style={myStyle} />;
+        case PluginType.SplitA:
+            return <SplitAIcon className={className} style={myStyle} />;
+        case PluginType.SplitB:
+            return <SplitBIcon className={className} style={myStyle} />;
+        case PluginType.SplitMix:
+            return <SplitMixIcon className={className} style={myStyle} />;
+        case PluginType.SplitLR:
+            return <SplitLrIcon className={className} style={myStyle} />;
+
+        case PluginType.None:
+            return <FxEmptyIcon className={className} style={myStyle} />;
+        case PluginType.Terminal:
+            return <FxTerminalIcon className={className} style={myStyle} />;
+
+            default:
+                case PluginType.Plugin:
+            return <FxPluginIcon className={className} style={myStyle} />;
+    }
 }
 export function SelectBaseIcon(plugin_type: PluginType): string {
     switch (plugin_type) {
@@ -66,7 +195,7 @@ export function SelectBaseIcon(plugin_type: PluginType): string {
             return "fx_flanger.svg";
         case PluginType.LowpassPlugin:
             return "fx_filter.svg";
-        case PluginType.HighpassPlugin:            
+        case PluginType.HighpassPlugin:
             return "fx_filter_hp.svg";
         case PluginType.ParaEQPlugin:
             return "fx_parametric_eq.svg";
@@ -141,20 +270,26 @@ function hashString(str: string): number {
     return hash;
 }
 
-export function SelectIcon(plugin_type: PluginType, itemUri: string) {
+export function SelectIconUri(plugin_type: PluginType) {
     let icon = SelectBaseIcon(plugin_type);
     return PiPedalModelFactory.getInstance().svgImgUrl(icon);
 }
 
 const PluginIcon = withStyles(styles)((props: PluginIconProps) => {
-    const { classes, pluginUri, pluginType } = props;
+    const { classes, pluginType, opacity } = props;
 
     let size: number = 24;
     if (props.size) size = props.size;
     let topVal: number = (props.offsetY ?? 0);
 
+    let svgIcon = SelectSvgIcon(pluginType, classes.icon, size, opacity);
+    if (svgIcon) {
+        return svgIcon;
+    }
+
+    // colored icons that don't have dark/light variants.
     return (
-        <img src={SelectIcon(pluginType, pluginUri)} className={classes.icon} style={{ width: size, height: size, color: "#F88", position: "relative", top: topVal }} alt={pluginType as string}
+        <img src={SelectIconUri(pluginType)} className={classes.icon} style={{ width: size, height: size, position: "relative", top: topVal, opacity: " " }} alt=''
         />);
 
     // let maskText = "url(" + SelectIcon(pluginType, pluginUri) + ") no-repeat center";
diff --git a/react/src/PluginInfoDialog.tsx b/react/src/PluginInfoDialog.tsx
index 986d43d..338a98c 100644
--- a/react/src/PluginInfoDialog.tsx
+++ b/react/src/PluginInfoDialog.tsx
@@ -235,7 +235,7 @@ const PluginInfoDialog = withStyles(styles)((props: PluginInfoProps) => {
                     <MuiDialogTitle >
                         <div style={{ display: "flex", flexDirection: "row", alignItems: "start", flexWrap: "nowrap" }}>
                             <div style={{ flex: "0 0 auto", marginRight: 16 }}>
-                                <PluginIcon pluginType={plugin.plugin_type} pluginUri={plugin.uri} offsetY={3} />
+                                <PluginIcon pluginType={plugin.plugin_type} offsetY={3} />
                             </div>
                             <div style={{ flex: "1 1 auto" }}>
                                 <Typography variant="h6">{plugin.name}</Typography>
diff --git a/react/src/PluginPresetsDialog.tsx b/react/src/PluginPresetsDialog.tsx
index cd3df43..f3eac23 100644
--- a/react/src/PluginPresetsDialog.tsx
+++ b/react/src/PluginPresetsDialog.tsx
@@ -78,6 +78,9 @@ const styles = (theme: Theme) => createStyles({
         position: 'relative',
         top: 0, left: 0
     },
+    itemBackground: {
+        background: theme.palette.background.paper
+    },
     dialogActionBar: {
         position: 'relative',
         top: 0, left: 0,
@@ -249,7 +252,7 @@ const PluginPresetsDialog = withStyles(styles, { withTheme: true })(
             let classes = this.props.classes;
             let selectedItem = this.state.selectedItem;
             return (
-                <div key={presetEntry.instanceId} style={{ background: "white" }} >
+                <div key={presetEntry.instanceId} className="backgroundItem"  >
 
                     <ButtonBase style={{ width: "100%", height: 48 }}
                         onClick={() => this.handleItemClick(presetEntry.instanceId)}
diff --git a/react/src/PresetDialog.tsx b/react/src/PresetDialog.tsx
index c00a93a..95d2e38 100644
--- a/react/src/PresetDialog.tsx
+++ b/react/src/PresetDialog.tsx
@@ -18,6 +18,7 @@
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React, { SyntheticEvent,Component } from 'react';
+import isDarkMode from './DarkMode';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import { PiPedalModel, PiPedalModelFactory, PresetIndexEntry, PresetIndex } from './PiPedalModel';
@@ -84,6 +85,9 @@ const styles = (theme: Theme) => createStyles({
         marginLeft: theme.spacing(2),
         flex: 1,
     },
+    itemBackground: {
+        background: theme.palette.background.paper
+    },
     itemFrame: {
         display: "flex",
         flexDirection: "row",
@@ -241,7 +245,7 @@ const PresetDialog = withStyles(styles, { withTheme: true })(
             let classes = this.props.classes;
             let selectedItem = this.isEditMode() ? this.state.selectedItem : this.state.presets.selectedInstanceId;
             return (
-                <div key={presetEntry.instanceId} style={{ background: "white" }} >
+                <div key={presetEntry.instanceId} className="itemBackground">
 
                     <ButtonBase style={{ width: "100%", height: 48 }}
                         onClick={() => this.handleItemClick(presetEntry.instanceId)}
@@ -249,7 +253,9 @@ const PresetDialog = withStyles(styles, { withTheme: true })(
                         <SelectHoverBackground selected={presetEntry.instanceId === selectedItem} showHover={true} />
                         <div className={classes.itemFrame}>
                             <div className={classes.iconFrame}>
-                                <img src="img/ic_presets.svg" className={classes.itemIcon} alt="" />
+                                <img 
+                                    src={isDarkMode()? "img/ic_presets_white.svg": "img/ic_presets.svg"}
+                                 className={classes.itemIcon} alt="" />
                             </div>
                             <div className={classes.itemLabel}>
                                 <Typography>
@@ -402,7 +408,9 @@ const PresetDialog = withStyles(styles, { withTheme: true })(
                                                 >
                                                     <MenuItem onClick={() => { this.handleDownloadPreset(); }} >
                                                         <ListItemIcon>
-                                                            <img src="img/file_download_black_24dp.svg" style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
+                                                            <img src=
+                                                                {isDarkMode()? "img/file_download_white_24dp.svg":"img/file_download_black_24dp.svg"}
+                                                                 style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
                                                         </ListItemIcon>
                                                         <ListItemText>
                                                             Download preset
@@ -411,7 +419,8 @@ const PresetDialog = withStyles(styles, { withTheme: true })(
                                                     </MenuItem>
                                                     <MenuItem onClick={() => { this.handleUploadPreset() }}>
                                                         <ListItemIcon>
-                                                            <img src="img/file_upload_black_24dp.svg" style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
+                                                            <img src={ isDarkMode()? "img/file_upload_white_24dp.svg": "img/file_upload_black_24dp.svg"}
+                                                             style={{ width: 24, height: 24, opacity: 0.6 }} alt="" />
                                                         </ListItemIcon>
                                                         <ListItemText>
                                                             Upload preset
diff --git a/react/src/PresetSelector.tsx b/react/src/PresetSelector.tsx
index 2067c6f..c15579e 100644
--- a/react/src/PresetSelector.tsx
+++ b/react/src/PresetSelector.tsx
@@ -19,11 +19,8 @@
 
 import { SyntheticEvent, Component } from 'react';
 import IconButton from '@mui/material/IconButton';
-import Typography from '@mui/material/Typography';
 import { PiPedalModel, PiPedalModelFactory, PresetIndex } from './PiPedalModel';
 import SaveIconOutline from '@mui/icons-material/Save';
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import ButtonBase from "@mui/material/ButtonBase";
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { Theme } from '@mui/material/styles';
 import { WithStyles } from '@mui/styles';
@@ -37,6 +34,7 @@ import Divider from '@mui/material/Divider';
 import RenameDialog from './RenameDialog'
 import Select from '@mui/material/Select';
 import UploadPresetDialog from './UploadPresetDialog';
+import isDarkMode from './DarkMode';
 
 
 interface PresetSelectorProps extends WithStyles<typeof styles> {
@@ -60,7 +58,7 @@ interface PresetSelectorState {
 }
 
 
-const selectColor = "black";
+const selectColor = isDarkMode()? "#888": "black";
 
 const styles = (theme: Theme) => createStyles({
     select: { // fu fu fu.Overrides for white selector on dark background.
@@ -311,51 +309,32 @@ const PresetSelector =
                         </div>
 
                         <div style={{ flex: "1 1 auto", minWidth: 60, maxWidth: 300, position: "relative", paddingRight: 12 }} >
-                            {true ? (
-                                <Select variant="standard"
-                                    className={classes.select}
-                                    style={{ width: "100%", position: "relative", top: 0 }} disabled={!this.state.enabled}
-                                    onChange={(e, extra) => this.handleChange(e, extra)}
-                                    onClose={(e) => this.handleSelectClose(e)}
-                                    displayEmpty
-                                    value={presets.selectedInstanceId === 0? '' : presets.selectedInstanceId}
-                                    inputProps={{
-                                        classes: { icon: classes.icon },
-                                        'aria-label': "Select preset"
-                                    }
-                                    }
-                                >
-                                    {
-                                        presets.presets.map((preset) => {
-                                            return (
-                                                <MenuItem key={preset.instanceId} value={preset.instanceId} >
-                                                    {(presets.presetChanged && preset.instanceId === presets.selectedInstanceId)
-                                                        ? (preset.name + "*")
-                                                        : (preset.name)
-                                                    }
-                                                </MenuItem>
-                                            );
-                                        })
-                                    }
-                                </Select>
-                            ) : (
-                                <ButtonBase style={{ width: "100%", textAlign: "left", borderBottom: "1px white solid", position: "relative", top: 2 }} disabled={!this.state.enabled}
-                                    onClick={(e) => { this.showPresetDialog(true); }}
-                                >
-                                    <div style={{ width: "100%", textAlign: "left", display: "flex", flexWrap: "nowrap", flexDirection: "row", overflow: "hidden" }}>
-                                        <div style={{ flex: "0 1 auto", paddingLeft: 8, overflow: "hidden" }}>
-                                            <Typography noWrap  >
-                                                {this.state.presets.getSelectedText()}
-                                            </Typography>
-                                        </div>
-                                        <div style={{ flex: "1 1 1px" }} />
-                                        <div style={{ flex: "0 0 auto" }}>
-                                            <ArrowDropDownIcon style={{ opacity: 0.75 }} />
-                                        </div>
-
-                                    </div>
-                                </ButtonBase>
-                            )}
+                            <Select variant="standard"
+                                className={classes.select}
+                                style={{ width: "100%", position: "relative", top: 0 }} disabled={!this.state.enabled}
+                                onChange={(e, extra) => this.handleChange(e, extra)}
+                                onClose={(e) => this.handleSelectClose(e)}
+                                displayEmpty
+                                value={presets.selectedInstanceId === 0? '' : presets.selectedInstanceId}
+                                inputProps={{
+                                    classes: { icon: classes.icon },
+                                    'aria-label': "Select preset"
+                                }
+                                }
+                            >
+                                {
+                                    presets.presets.map((preset) => {
+                                        return (
+                                            <MenuItem key={preset.instanceId} value={preset.instanceId} >
+                                                {(presets.presetChanged && preset.instanceId === presets.selectedInstanceId)
+                                                    ? (preset.name + "*")
+                                                    : (preset.name)
+                                                }
+                                            </MenuItem>
+                                        );
+                                    })
+                                }
+                            </Select>
                         </div>
                         <div style={{ flex: "0 0 auto" }}>
                             <IconButton
diff --git a/react/src/SettingsDialog.tsx b/react/src/SettingsDialog.tsx
index 024e910..c0b376b 100644
--- a/react/src/SettingsDialog.tsx
+++ b/react/src/SettingsDialog.tsx
@@ -98,6 +98,11 @@ const styles = (theme: Theme) => createStyles({
         marginLeft: theme.spacing(2),
         flex: 1,
     },
+    cpuStatusColor: {
+        color: theme.palette.text.secondary,
+        opacity: 0.7
+
+    },
     sectionHead: {
         marginLeft: 24,
         marginRight: 24,
@@ -567,15 +572,15 @@ const SettingsDialog = withStyles(styles, { withTheme: true })(
                                     </Typography>
                                     {(!isConfigValid) ?
                                         (
-                                            <div style={{ paddingLeft: 48, position: "relative", top: -12 }}>
+                                            <div className={classes.cpuStatusColor} style={{ paddingLeft: 48, position: "relative", top: -12 }}>
                                                 <Typography display="block" variant="caption" color="textSecondary">Status: <span style={{ color: "#F00" }}>Not configured.</span></Typography>
                                                 {(!this.props.onboarding) && (
-                                                    <Typography display="block" variant="caption" color="textSecondary">Governor: </Typography>
+                                                    <Typography display="block" variant="caption" color="inherit">Governor: </Typography>
                                                 )}
                                             </div>
                                         ) :
                                         (
-                                            <div style={{ paddingLeft: 48, position: "relative", top: -12 }}>
+                                            <div className={classes.cpuStatusColor} style={{ paddingLeft: 48, position: "relative", top: -12 }}>
                                                 {JackHostStatus.getDisplayView("", this.state.jackStatus)}
                                                 { (!this.props.onboarding) && JackHostStatus.getCpuInfo("Governor:\u00A0", this.state.jackStatus)}
                                             </div>
diff --git a/react/src/TemporaryDrawer.tsx b/react/src/TemporaryDrawer.tsx
index 98b01c3..9e82237 100644
--- a/react/src/TemporaryDrawer.tsx
+++ b/react/src/TemporaryDrawer.tsx
@@ -22,11 +22,11 @@ import { WithStyles } from '@mui/styles';
 import withStyles from '@mui/styles/withStyles';
 import createStyles from '@mui/styles/createStyles';
 
-import Toolbar from '@mui/material/Toolbar';
 import IconButton from '@mui/material/Toolbar';
 import Drawer from '@mui/material/Drawer';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { Theme } from '@mui/material/styles';
+import isDarkMode from './DarkMode';
 
 
 const drawerStyles = (theme: Theme) => {
@@ -40,7 +40,7 @@ const drawerStyles = (theme: Theme) => {
 
     drawer_header: {
         color: theme.palette.primary.main,
-        background: 'white',
+        background: (isDarkMode()? theme.palette.background.default: 'white'),
 
     }
 })};
@@ -98,13 +98,13 @@ export const TemporaryDrawer = withStyles(drawerStyles)(
                                 onClick={() => { this.fireClose(); }}
                                 onKeyDown={() => { this.fireClose(); }}
                             >
-                                <Toolbar className={classes.drawer_header} 
-                                    style={{backgroundImage: 'url("img/ic_drawer_2.png")', border: "red solid", borderWidth: "0px 0px 3px 0px" }} 
-                                >
-                                    <IconButton style={{ marginLeft: -24  }} >
+                                <div style={{ display: "flex", flexFlow: "row nowrap", justifyContent: "flex-start", alignItems: "center", width: "100%"}}>
+
+                                    <IconButton style={{ flex: "0 0 auto" }} >
                                         <ArrowBackIcon style={{ fill: '#666' }} />
                                     </IconButton>
-                                </Toolbar>
+                                    <img src="img/Pi-Logo-3.png" alt="" style={{height: 36}} />
+                                </div>
                                 {this.props.children}
                             </div>
                         </Drawer>
diff --git a/react/src/svg/fx_amplifier.svg b/react/src/svg/fx_amplifier.svg
new file mode 100644
index 0000000..14fea41
--- /dev/null
+++ b/react/src/svg/fx_amplifier.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1">
+	<g>
+		<path d="M47,13V7c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v6H47z M24.186,4.766c1.524,0,2.761,1.236,2.761,2.76
+			c0,1.525-1.236,2.761-2.761,2.761s-2.761-1.236-2.761-2.761C21.425,6.002,22.661,4.766,24.186,4.766z M16.497,4.766
+			c1.525,0,2.761,1.236,2.761,2.76c0,1.525-1.236,2.761-2.761,2.761c-1.524,0-2.76-1.236-2.76-2.761
+			C13.736,6.002,14.972,4.766,16.497,4.766z M8.808,4.766c1.525,0,2.761,1.236,2.761,2.76c0,1.525-1.236,2.761-2.761,2.761
+			c-1.524,0-2.76-1.236-2.76-2.761C6.047,6.002,7.283,4.766,8.808,4.766z"/>
+		<path d="M1,16v25c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6V16H1z M24.394,43.261c-6.613,0-11.975-5.361-11.975-11.975
+			s5.361-11.975,11.975-11.975s11.975,5.361,11.975,11.975S31.007,43.261,24.394,43.261z"/>
+	</g>
+	<circle cx="24.394" cy="31.286" r="3.993"/>
+</g>
+<g id="Combined">
+</g>
+</svg>
diff --git a/react/src/svg/fx_analyzer.svg b/react/src/svg/fx_analyzer.svg
new file mode 100644
index 0000000..54be993
--- /dev/null
+++ b/react/src/svg/fx_analyzer.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<line display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" x1="23.5" y1="10" x2="23.5" y2="22"/>
+	<line display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" x1="43" y1="13.546" x2="19.938" y2="53.489"/>
+	<line display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" x1="5" y1="13.545" x2="11.904" y2="25.504"/>
+</g>
+<g id="Combined">
+	<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h13.798l20.037-34.704l4.33,2.5L26.571,47H41c3.313,0,6-2.687,6-6V7
+		C47,3.687,44.313,1,41,1z M9.739,26.754L2.835,14.795l4.33-2.5l6.904,11.958L9.739,26.754z M26,22h-5V10h5V22z"/>
+</g>
+</svg>
diff --git a/react/src/svg/fx_chorus.svg b/react/src/svg/fx_chorus.svg
new file mode 100644
index 0000000..301a39f
--- /dev/null
+++ b/react/src/svg/fx_chorus.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<circle cx="24" cy="23.999" r="23"/>
+	<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<path id="full_sin_1_" display="inline" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" d="M-6.638,31.942
+		 M-6.64,31.94c1.398,3.74,2.795,7.481,4.388,7.481 M2.129,31.94c-1.397,3.739-2.793,7.481-4.386,7.481 M2.128,31.94
+		c1.397-3.74,2.795-7.481,4.387-7.481 M10.896,31.941C9.5,28.2,8.104,24.459,6.511,24.459 M10.896,31.942
+		c1.398,3.741,2.795,7.481,4.385,7.481 M19.665,31.942c-1.398,3.741-2.795,7.481-4.387,7.481 M19.665,31.943
+		c1.396-3.741,2.792-7.481,4.385-7.481 M28.432,31.943c-1.397-3.741-2.794-7.481-4.386-7.481 M28.432,31.941
+		c1.397,3.74,2.792,7.481,4.386,7.481 M37.197,31.941c-1.396,3.74-2.792,7.481-4.386,7.481 M37.197,31.941
+		c1.399-3.74,2.796-7.48,4.387-7.48 M45.966,31.942c-1.396-3.741-2.794-7.481-4.385-7.481 M45.966,31.941
+		c1.396,3.74,2.793,7.481,4.389,7.481 M54.733,31.941c-1.396,3.74-2.791,7.481-4.385,7.481 M54.733,31.942
+		c1.398-3.741,2.793-7.481,4.387-7.481 M63.501,31.942c-1.398-3.741-2.793-7.481-4.387-7.481 M63.501,31.94
+		c1.395,3.74,2.793,7.481,4.387,7.481 M72.269,31.94c-1.395,3.739-2.793,7.481-4.385,7.481 M72.269,31.94
+		c1.396-3.74,2.791-7.481,4.385-7.481 M81.038,31.941c-1.398-3.741-2.797-7.482-4.387-7.482 M81.038,31.942
+		c1.396,3.741,2.795,7.481,4.385,7.481 M89.806,31.942c-1.396,3.741-2.795,7.481-4.385,7.481 M89.806,31.943"/>
+	<path id="full_sin_2_" display="inline" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" d="M-4.638,16.942
+		 M-4.64,16.94c1.398,3.74,2.795,7.481,4.388,7.481 M4.129,16.94c-1.397,3.739-2.793,7.481-4.386,7.481 M4.128,16.94
+		c1.397-3.74,2.795-7.481,4.387-7.481 M12.896,16.941C11.5,13.2,10.104,9.459,8.511,9.459 M12.896,16.942
+		c1.398,3.741,2.795,7.481,4.385,7.481 M21.665,16.942c-1.398,3.741-2.795,7.481-4.387,7.481 M21.665,16.943
+		c1.396-3.741,2.792-7.481,4.385-7.481 M30.432,16.943c-1.397-3.741-2.794-7.481-4.386-7.481 M30.432,16.941
+		c1.397,3.74,2.792,7.481,4.386,7.481 M39.197,16.941c-1.396,3.74-2.792,7.481-4.386,7.481 M39.197,16.941
+		c1.399-3.74,2.796-7.48,4.387-7.48 M47.966,16.942c-1.396-3.741-2.794-7.481-4.385-7.481 M47.966,16.941
+		c1.396,3.74,2.793,7.481,4.389,7.481 M56.733,16.941c-1.396,3.74-2.791,7.481-4.385,7.481 M56.733,16.942
+		c1.398-3.741,2.793-7.481,4.387-7.481 M65.501,16.942c-1.398-3.741-2.793-7.481-4.387-7.481 M65.501,16.94
+		c1.395,3.74,2.793,7.481,4.387,7.481 M74.269,16.94c-1.395,3.739-2.793,7.481-4.385,7.481 M74.269,16.94
+		c1.396-3.74,2.791-7.481,4.385-7.481 M83.038,16.941c-1.398-3.741-2.797-7.482-4.387-7.482 M83.038,16.942
+		c1.396,3.741,2.795,7.481,4.385,7.481 M91.806,16.942c-1.396,3.741-2.795,7.481-4.385,7.481 M91.806,16.943"/>
+</g>
+<g id="Composed">
+	<g>
+		<polygon points="2.15,32 2.148,31.998 2.147,32 		"/>
+		<path d="M35.904,31.415C37.664,26.709,38.952,23,41.573,23c0.002,0,0.005,0,0.01,0h0.001c0.003,0,0.006,0,0.008,0
+			c2.533,0,3.745,3.462,5.408,7.938V18.679c-0.141-0.374-0.283-0.753-0.428-1.141c-0.004-0.01-0.008-0.056-0.012-0.066
+			c-0.801-2.146-2.11-5.649-2.978-6.419c-0.864,0.768-2.173,4.273-2.974,6.413c-0.002,0.006-0.004,0.032-0.007,0.039
+			C38.845,22.216,37.455,26,34.834,26c-0.006,0-0.014,0-0.02,0c-0.008,0-0.014,0-0.02,0c-2.613,0-4-3.763-5.752-8.451
+			c-0.006-0.014-0.011-0.067-0.017-0.081l-0.002-0.004c-0.801-2.146-2.11-5.652-2.977-6.42c-0.868,0.768-2.177,4.277-2.978,6.424
+			c-0.004,0.01-0.008,0.021-0.012,0.031c-1.759,4.705-3.15,8.418-5.773,8.425c-0.002,0-0.003-0.002-0.006,0
+			c-0.002-0.002-0.004,0-0.006,0c-2.625-0.007-4.016-3.73-5.778-8.444c-0.004-0.011-0.008-0.021-0.011-0.032
+			c-0.802-2.148-2.105-5.639-2.971-6.406c-0.866,0.769-2.177,4.277-2.979,6.423l-1.405-0.52l0.166,0.067l-0.147-0.045l1.378,0.559
+			c-1.458,3.9-2.664,7.153-4.526,8.152v5.03c1.636-4.362,3.016-7.735,5.5-7.749c0.004,0,0.008,0.002,0.013,0
+			c0.003,0.001,0.009,0,0.013,0c2.625,0.014,4.016,3.742,5.775,8.458c0.004,0.01,0.007,0.02,0.011,0.029
+			c0.802,2.145,1.978,5.631,2.84,6.396C16.017,37.076,17,33.576,18,31.434v0.005c0-0.003,0.13,0.003,0.132-0.001
+			C19.891,26.723,21.409,23,24.035,23c0.004,0,0.007,0,0.013,0c0.002,0,0.009-0.019,0.013-0.019
+			c2.615,0.014,4.005,3.699,5.759,8.393c0.006,0.014,0.011,0.029,0.017,0.043l0.009,0.023c0.799,2.139,2.209,5.636,3.072,6.403
+			C33.785,37.074,35,33.568,36,31.422v0.004C36,31.419,35.902,31.422,35.904,31.415z"/>
+		<polygon points="2.11,32 2.108,31.999 2.108,32 		"/>
+		<path d="M44.572,32.497c-0.004-0.01-0.008-0.02-0.012-0.03c-0.801-2.146-2.11-5.654-2.978-6.424
+			c-0.864,0.768-2.173,4.264-2.974,6.403c-0.002,0.007-0.004,0.013-0.007,0.02c-1.758,4.711-3.147,8.436-5.769,8.457
+			c-0.006,0-0.014,0.002-0.02,0c-0.008,0.002-0.014,0.001-0.02,0.001c-2.613-0.021-4-3.959-5.752-8.646
+			C27.037,32.264,27.032,32,27.026,32h-0.002c-0.801-2-2.111-5.413-2.977-6.181c-0.867,0.768-2.176,4.403-2.977,6.55
+			c-0.004,0.01-0.008,0.099-0.012,0.109C19.3,37.183,17.908,41,15.286,41c-0.002,0-0.005,0-0.006,0
+			c-0.004,0-0.004-0.037-0.006-0.037c-2.625-0.007-4.016-3.769-5.778-8.482c-0.004-0.01-0.008-0.02-0.011-0.03
+			c-0.802-2.148-2.105-5.636-2.971-6.402c-0.866,0.769-2.177,4.282-2.979,6.429l-1.228-0.445l1.219,0.495
+			C2.658,34.848,1.88,36.94,1,38.466V41c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6v-2.769
+			C46.159,36.735,45.406,34.731,44.572,32.497z"/>
+		<path d="M2.716,16.453l0.011,0.004C4.487,11.748,5.879,8,8.5,8c0.004,0,0.008,0,0.013,0c0.003,0,0.009-0.02,0.013-0.02
+			c2.625,0.014,4.016,3.721,5.775,8.438c0.004,0.01,0.007,0.02,0.011,0.03c0.802,2.145,1.978,5.631,2.84,6.397
+			C18.017,22.077,19,18.577,20,16.433v0.005c0-0.004,0.13,0.003,0.132,0C21.891,11.722,23.409,8,26.035,8c0.004,0,0.007,0,0.013,0
+			c0.004,0,0.009,0,0.013,0c2.615,0,4.019,3.699,5.772,8.393c0.006,0.014,0.024,0.009,0.03,0.023l0.034,0.023
+			c0.799,2.139,2.157,5.634,3.021,6.401C35.785,22.072,37,18.563,38,16.417c0,0,0-0.001,0-0.001c0-0.007-0.098,0.006-0.096-0.001
+			C39.664,11.709,40.952,8,43.573,8c0.002,0,0.005,0,0.01,0h0.001c0.003,0,0.006,0,0.008,0c1.464,0,2.485,1.156,3.408,2.995V7
+			c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v13.737C1.619,19.383,2.252,17.693,2.716,16.453z"/>
+		<polygon points="1,31.557 1,31.558 1.046,31.575 		"/>
+		<polygon points="4.11,17 4.108,17 4.108,17 		"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_compressor.svg b/react/src/svg/fx_compressor.svg
new file mode 100644
index 0000000..f6d7029
--- /dev/null
+++ b/react/src/svg/fx_compressor.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<polyline id="Limiter_Path" fill="none" stroke="#FFFFFF" stroke-width="5" points="5.5,53.25 24,12.5 65.5,12.5 	"/>
+	<path id="Compressor_Path" display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" d="M8.5,53.25
+		c0,0,15.445-34.126,16.146-35.565c1.929-3.964,2.947-5.192,8.477-5.186c1.39,0.001,35.378,0,35.378,0"/>
+</g>
+<g id="Composed">
+	<g>
+		<path d="M8.585,47c4.368-9.646,13.269-29.291,13.813-30.409C24.576,12.113,26.345,10,33.088,10c0.013,0,0.024,0,0.037,0
+			C33.703,10,39.93,10,47,10V7c0-3.313-2.688-6-6-6H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6H8.585z"/>
+		<path d="M33.119,15c-0.021,0-0.043,0-0.063,0c-4.323,0-4.574,0.515-6.162,3.779C26.449,19.691,19.506,35.006,14.074,47H41
+			c3.313,0,6-2.688,6-6V15C39.928,15,33.698,15,33.119,15z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_constant.svg b/react/src/svg/fx_constant.svg
new file mode 100644
index 0000000..321a890
--- /dev/null
+++ b/react/src/svg/fx_constant.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<text transform="matrix(1 0 0 1 9.8389 32.5723)" fill="#FFFFFF" font-family="'PalatinoLinotype-BoldItalic'" font-size="34">fx</text>
+	
+		<text id="k" transform="matrix(1 0 0 1 14.5454 35.5723)" display="inline" fill="#FFFFFF" font-family="'PalatinoLinotype-BoldItalic'" font-size="34">k</text>
+</g>
+<g id="Composed">
+	<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z M26.805,26.91
+		c0.648,1.788,1.178,3.092,1.586,3.91c0.41,0.819,0.711,1.303,0.904,1.453c0.195,0.148,0.375,0.224,0.541,0.224
+		c0.42,0,1.211-0.398,2.373-1.195l0.184,0.017l0.365,0.647l-0.051,0.232c-0.441,0.276-0.885,0.57-1.328,0.88
+		c-2.113,1.472-3.529,2.208-4.25,2.208c-0.199,0-0.381-0.044-0.547-0.133s-0.369-0.302-0.607-0.64
+		c-0.236-0.337-0.492-0.852-0.763-1.543c-0.271-0.692-0.681-1.777-1.229-3.254c-0.548-1.479-0.911-2.493-1.087-3.047
+		c-0.62,0.643-1.054,1.148-1.303,1.52s-0.429,0.708-0.54,1.012c-0.111,0.305-0.26,0.922-0.448,1.852
+		c-0.188,0.93-0.315,1.613-0.382,2.051c-0.066,0.437-0.1,0.882-0.1,1.336c-1.118,0.056-2.374,0.276-3.769,0.664l-0.282-0.415
+		c0.93-3.243,1.887-7.509,2.872-12.8c0.985-5.29,1.478-8.19,1.478-8.699c0-0.266-0.075-0.465-0.224-0.598s-0.379-0.208-0.689-0.224
+		c-0.31-0.017-0.896-0.03-1.76-0.042L17.6,12.177l0.116-0.714l0.149-0.149c2.413-0.299,4.665-0.819,6.757-1.561l0.414,0.365
+		c-0.553,2.214-1.776,7.836-3.668,16.867c0.044-0.044,0.47-0.559,1.278-1.544c1.04-1.272,1.961-2.341,2.764-3.204
+		c0.802-0.863,1.612-1.607,2.433-2.233c0.818-0.625,1.537-1.054,2.158-1.287c0.619-0.232,1.268-0.349,1.941-0.349
+		c0.299,0,0.604,0.033,0.914,0.1l0.066,0.199c-0.332,1.118-0.537,1.959-0.615,2.523l-0.182,0.133
+		c-0.654-0.21-1.156-0.315-1.512-0.315c-0.719,0-1.521,0.21-2.406,0.631c-0.887,0.421-1.738,1.107-2.557,2.059
+		C25.773,24.053,26.158,25.123,26.805,26.91z"/>
+</g>
+</svg>
diff --git a/react/src/svg/fx_converter.svg b/react/src/svg/fx_converter.svg
new file mode 100644
index 0000000..ade942c
--- /dev/null
+++ b/react/src/svg/fx_converter.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<line display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" x1="-11" y1="18.5" x2="28" y2="18.5"/>
+	<line display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" x1="-18" y1="29.5" x2="28" y2="29.5"/>
+	<polyline display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" points="19.25,9.504 33.746,24 19.25,38.496 	"/>
+</g>
+<g id="Combined">
+	<g>
+		<polygon points="30.211,24 27.211,21 1,21 1,27 27.211,27 		"/>
+		<path d="M41,1H7C3.687,1,1,3.687,1,7v9h21.21l-4.728-4.728l3.535-3.535L37.281,24L21.018,40.264l-3.535-3.535L22.211,32H1v9
+			c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6V7C47,3.687,44.313,1,41,1z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_delay.svg b/react/src/svg/fx_delay.svg
new file mode 100644
index 0000000..b5e29ca
--- /dev/null
+++ b/react/src/svg/fx_delay.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<polyline display="inline" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" points="-47,33.5 9,33.5 
+		11.353,22.952 15.154,40.249 19.336,33.5 83,33.5 	"/>
+	<polyline display="inline" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" points="-27,20.5 29,20.5 
+		31.354,9.952 35.154,27.249 39.336,20.5 103,20.5 	"/>
+</g>
+<g id="Combined">
+	<g>
+		<polygon points="31.343,16.89 30.202,22 12.68,22 15.826,36.317 18.501,32 47,32 47,22 40.171,22 34.482,31.182 		"/>
+		<path d="M10.698,19l0.666-2.986L12.02,19h15.778l3.566-15.986l4.462,20.303L38.501,19H47V7c0-3.313-2.687-6-6-6H7
+			C3.687,1,1,3.687,1,7v12H10.698z"/>
+		<path d="M20.171,35l-5.688,9.181l-3.14-14.29L10.202,35H1v6c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6v-6H20.171z"/>
+		<polygon points="7.798,32 10.028,22 1,22 1,32 		"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_dial.svg b/react/src/svg/fx_dial.svg
new file mode 100644
index 0000000..4152f63
--- /dev/null
+++ b/react/src/svg/fx_dial.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1">
+	<path d="M31.5,2.262v8.767C35.976,13.628,39,18.462,39,24c0,8.271-6.729,15-15,15c-8.271,0-15-6.729-15-15
+		c0-5.538,3.024-10.372,7.5-12.971V2.262C7.49,5.38,1,13.943,1,24c0,12.682,10.318,23,23,23c12.683,0,23-10.318,23-23
+		C47,13.943,40.51,5.379,31.5,2.262z"/>
+	<path d="M20,25.5h8V1.354C26.7,1.126,25.365,1,24,1s-2.7,0.126-4,0.354V25.5z"/>
+</g>
+<g id="Composed">
+</g>
+</svg>
diff --git a/react/src/svg/fx_distortion.svg b/react/src/svg/fx_distortion.svg
new file mode 100644
index 0000000..1ad8b16
--- /dev/null
+++ b/react/src/svg/fx_distortion.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Original" display="none">
+	<circle display="inline" cx="24" cy="23.999" r="23"/>
+	<path display="inline" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" d="M-29.056,27.166 M-15.749,27.162
+		c-0.524,2.555-1.05,5.108-1.578,7.51l-10.135,0.07c-0.534-2.42-1.064-4.999-1.594-7.58 M-2.44,27.164
+		c-1.035-5.03-2.067-10.06-3.134-13.896l-7.039-0.01c-1.068,3.837-2.102,8.872-3.136,13.904 M-2.44,27.162 M-2.44,27.166
+		 M10.868,27.162c-0.524,2.555-1.05,5.108-1.579,7.51l-10.134,0.07c-0.534-2.42-1.063-4.999-1.595-7.58 M24.176,27.164
+		c-1.034-5.031-2.066-10.06-3.133-13.896l-7.04-0.01c-1.067,3.837-2.101,8.872-3.136,13.904 M24.176,27.162 M24.176,27.166
+		 M37.483,27.162c-0.525,2.555-1.052,5.11-1.58,7.51l-10.132,0.07c-0.536-2.418-1.065-4.999-1.596-7.58 M50.791,27.164
+		c-1.035-5.031-2.065-10.06-3.134-13.896l-7.04-0.01c-1.065,3.837-2.099,8.872-3.134,13.904 M50.791,27.162 M50.791,27.166
+		 M64.102,27.162c-0.524,2.555-1.052,5.11-1.581,7.51l-10.133,0.07c-0.536-2.418-1.064-4.999-1.597-7.58 M77.408,27.164
+		c-1.037-5.031-2.066-10.06-3.137-13.896l-7.037-0.01c-1.063,3.837-2.1,8.872-3.133,13.904 M77.408,27.162 M77.408,27.166
+		 M90.714,27.162c-0.523,2.555-1.048,5.108-1.575,7.51l-10.137,0.07c-0.534-2.42-1.063-4.999-1.594-7.58 M104.024,27.164
+		c-1.037-5.031-2.066-10.06-3.136-13.896l-7.039-0.01c-1.069,3.837-2.1,8.872-3.136,13.904 M104.024,27.162 M104.024,27.166
+		 M117.33,27.162c-0.521,2.555-1.048,5.108-1.574,7.51l-10.137,0.07c-0.536-2.42-1.063-4.999-1.595-7.58 M130.641,27.164
+		c-1.037-5.031-2.065-10.06-3.137-13.896l-7.037-0.01c-1.067,3.837-2.1,8.872-3.137,13.904 M130.641,27.162 M130.641,27.166
+		 M143.947,27.162c-0.524,2.555-1.052,5.112-1.58,7.51l-10.133,0.07c-0.534-2.416-1.065-4.999-1.594-7.58 M157.253,27.164
+		c-1.032-5.031-2.063-10.06-3.132-13.896l-7.037-0.01c-1.071,3.837-2.101,8.872-3.137,13.904 M157.253,27.162 M157.253,27.166
+		 M170.563,27.162c-0.519,2.555-1.052,5.112-1.578,7.51l-10.133,0.07c-0.535-2.416-1.067-4.999-1.599-7.58 M183.869,27.164
+		c-1.033-5.031-2.062-10.06-3.133-13.896l-7.037-0.01c-1.066,3.837-2.1,8.872-3.137,13.904 M183.869,27.162"/>
+</g>
+<g id="Combined">
+	<g>
+		<path d="M7.674,32.683c0.413-1.925,0.824-3.923,1.234-5.922c0-0.003,0.001-0.005,0.001-0.008l0.02-0.094
+			c1.017-4.945,2.069-10.059,3.147-13.937l0.408-1.467l10.079,0.015l0.406,1.462c1.079,3.879,2.13,8.994,3.146,13.94
+			c0.003,0.012,0.005,0.022,0.007,0.034c0.004,0.018,0.008,0.035,0.012,0.053l0.038,0.183c0.401,1.956,0.803,3.909,1.207,5.789
+			l7.147-0.049C34.939,30.759,35,28.759,36,26.759c0-0.002,0-0.004,0-0.006l-0.212-0.12c1.015-4.936,1.946-10.039,3.021-13.91
+			l0.349-1.467l4.022,0.006C39.058,5.077,32.006,1,24.015,1C11.312,1,1.007,11.296,1.007,23.999c0,3.087,0.609,6.029,1.711,8.719
+			L7.674,32.683z"/>
+		<path d="M42.153,15.261c-0.907,3.534-1.809,7.919-2.685,12.178l-0.026,0.127c-0.001,0.002-0.001,0.005-0.002,0.007
+			c-0.526,2.562-1.054,5.124-1.584,7.529l-0.343,1.56l-13.345,0.092l-0.35-1.578c-0.525-2.37-1.045-4.896-1.564-7.427l-0.029-0.143
+			c-0.003-0.013-0.006-0.025-0.008-0.039l-0.018-0.088c-0.878-4.271-1.782-8.669-2.692-12.212l-3.967-0.005
+			c-0.91,3.541-1.814,7.936-2.692,12.204l-0.021,0.101c0,0.002-0.001,0.004-0.001,0.006c-0.525,2.563-1.053,5.123-1.583,7.53
+			l-0.343,1.56l-6.071,0.042C8.947,42.908,15.994,47,24,47c12.703,0,23-10.297,23-23.001c0-3.093-0.614-6.041-1.722-8.734
+			L42.153,15.261z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_empty.svg b/react/src/svg/fx_empty.svg
new file mode 100644
index 0000000..e6f1eb5
--- /dev/null
+++ b/react/src/svg/fx_empty.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+</svg>
diff --git a/react/src/svg/fx_eq.svg b/react/src/svg/fx_eq.svg
new file mode 100644
index 0000000..61d6873
--- /dev/null
+++ b/react/src/svg/fx_eq.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<path display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" d="M-5,12.5c0,0,11.333,0.167,21,0
+		c6.754-0.116,11.413,19.888,18.167,20c10,0.167,24.833,0,24.833,0"/>
+</g>
+<g id="Combined">
+	<g>
+		<path d="M15.957,10c4.848-0.12,8.015,5.42,11.34,11.248c1.981,3.473,4.976,8.72,6.912,8.752c3.898,0.066,8.564,0.08,12.791,0.072
+			V7c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v3.057C5.137,10.082,10.806,10.089,15.957,10z"/>
+		<path d="M45.021,35.073c-3.692,0-7.569-0.018-10.896-0.073c-4.784-0.08-7.887-5.518-11.171-11.273
+			C20.97,20.249,17.975,15,16.061,15c-0.006,0-0.012,0-0.018,0C10.861,15,5.165,15,1,15.001V41c0,3.313,2.687,6,6,6h34
+			c3.313,0,6-2.687,6-6v-5.929C46.349,35.072,45.689,35.073,45.021,35.073z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_error.svg b/react/src/svg/fx_error.svg
new file mode 100644
index 0000000..37f8f1f
--- /dev/null
+++ b/react/src/svg/fx_error.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="x">
+</g>
+<path fill="#800000" d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z
+	 M39.436,34.23l-5.205,5.205L24,29.205l-10.23,10.23L8.564,34.23L18.795,24L8.564,13.769l5.205-5.204L24,18.795l10.23-10.23
+	l5.205,5.204L29.205,24L39.436,34.23z"/>
+</svg>
diff --git a/react/src/svg/fx_filter.svg b/react/src/svg/fx_filter.svg
new file mode 100644
index 0000000..e294879
--- /dev/null
+++ b/react/src/svg/fx_filter.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<path display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" d="M-7,20.5c0,0,6.632,0,14.601,0
+		c7.815,0,10.993-10.467,13.093-10.467c3.335,0,5.959,26.467,36.474,26.467c10.001,0,24.833,0,24.833,0"/>
+</g>
+<g id="Combined">
+	<g>
+		<path d="M7.601,18c3.835,0,6.455-3.792,8.367-6.561c1.507-2.182,2.698-3.906,4.726-3.906c2.401,0,3.453,2.191,5.047,5.507
+			c2.885,6.005,7.812,16.245,21.26,19.743V7c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v11H7.601z"/>
+		<path d="M21.233,15.206c-0.235-0.49-0.494-1.028-0.74-1.518c-0.143,0.204-0.283,0.407-0.412,0.593
+			C17.829,17.542,14.059,23,7.601,23H1v18c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6v-3.056
+			C30.383,34.247,24.371,21.74,21.233,15.206z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_filter_hp.svg b/react/src/svg/fx_filter_hp.svg
new file mode 100755
index 0000000..d695af5
--- /dev/null
+++ b/react/src/svg/fx_filter_hp.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1_1_" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<path display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" d="M-7,20.5c0,0,6.632,0,14.601,0
+		c7.815,0,10.993-10.467,13.093-10.467c3.335,0,5.958,26.467,36.474,26.467c10.001,0,24.833,0,24.833,0"/>
+</g>
+<g id="Combined">
+	<g>
+		<path d="M47.001,18V7c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v25.783c13.448-3.498,18.375-13.738,21.26-19.743
+			c1.594-3.316,2.646-5.507,5.047-5.507c2.028,0,3.219,1.724,4.727,3.906C33.945,14.208,36.564,18,40.4,18H47.001z"/>
+		<path d="M1.001,37.943V41c0,3.313,2.688,6,6,6h34c3.313,0,6-2.688,6-6V23H40.4c-6.459,0-10.229-5.458-12.48-8.719
+			c-0.129-0.187-0.27-0.389-0.412-0.593c-0.246,0.49-0.505,1.028-0.74,1.518C23.63,21.74,17.618,34.247,1.001,37.943z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_flanger.svg b/react/src/svg/fx_flanger.svg
new file mode 100644
index 0000000..e281aef
--- /dev/null
+++ b/react/src/svg/fx_flanger.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<g id="Layer_2">
+	<g>
+		<path d="M8.5,17.824c0.004,0.003,0.008,0.006,0.013,0.006c0.003,0.002,0.009,0.003,0.013,0.004
+			c2.625,0.971,4.016,5.203,5.775,10.561c0.004,0.012,0.007,0.021,0.011,0.033c0.802,2.437,2.106,6.396,2.968,7.477
+			c0.865-0.452,2.175-3.479,2.976-5.33c0.001-0.002,0.002-0.006,0.003-0.008c1.759-4.076,3.149-7.297,5.775-6.355
+			c0.004,0.001,0.007,0.002,0.013,0.005c0.003-0.001,0.01,0.003,0.014,0.005c2.614,0.966,4.006,5.175,5.76,10.507
+			c0.006,0.018,0.011,0.032,0.017,0.049l0.009,0.027c0.799,2.43,2.104,6.398,2.969,7.48c0.867-0.452,2.178-3.485,2.979-5.34v-0.002
+			c0.003-0.006,0.006-0.012,0.008-0.018c1.762-4.064,3.152-7.277,5.773-6.333c0.002,0.001,0.005,0.001,0.01,0.003l0.001,0.002
+			c0.003,0,0.006,0.002,0.008,0.002c1.409,0.519,2.461,1.983,3.407,4.051V22.409c-0.506-1.334-1.013-2.493-1.422-3.005
+			c-0.864,0.453-2.174,3.473-2.975,5.321c-0.002,0.006-0.004,0.012-0.006,0.018c-1.759,4.07-3.147,7.29-5.77,6.357
+			c-0.006-0.002-0.014-0.006-0.02-0.008c-0.009-0.003-0.015-0.005-0.021-0.008c-2.613-0.973-4-5.18-5.752-10.505
+			c-0.007-0.017-0.011-0.033-0.017-0.049l-0.002-0.005c-0.802-2.438-2.11-6.42-2.978-7.504c-0.868,0.452-2.177,3.485-2.978,5.341
+			c-0.004,0.008-0.008,0.018-0.013,0.026c-1.759,4.064-3.15,7.271-5.773,6.323c-0.002,0-0.003-0.003-0.006-0.002
+			c-0.002-0.002-0.004-0.001-0.006-0.002c-2.625-0.962-4.016-5.193-5.778-10.548c-0.004-0.013-0.008-0.024-0.011-0.036
+			c-0.802-2.44-2.105-6.406-2.971-7.487c-0.866,0.453-2.177,3.483-2.979,5.338l-1.314-0.967L6.14,10.954l1.378,1.041
+			c-1.757,4.063-3.146,7.272-5.764,6.338c-0.006-0.003-0.01-0.003-0.017-0.007c-0.004,0.001-0.011-0.004-0.017-0.006
+			C1.468,18.227,1.23,18.094,1,17.942v9.917c0.619-1.13,1.251-2.591,1.714-3.66l1.412,1.018L4.108,25.2l0.002,0.001l-1.386-1.024
+			C4.486,20.104,5.877,16.885,8.5,17.824z"/>
+		<path d="M1.744,15.247c0.864-0.453,2.171-3.474,2.97-5.322l1.412,1.019l-0.02-0.015L6.11,10.93L4.724,9.904
+			C6.485,5.831,7.877,2.612,10.5,3.553c0.004,0.002,0.008,0.002,0.013,0.005c0.003-0.001,0.009,0.003,0.013,0.005
+			c2.625,0.97,4.016,5.203,5.775,10.56c0.004,0.011,0.007,0.022,0.011,0.033c0.802,2.437,2.106,6.396,2.968,7.477
+			c0.865-0.453,2.175-3.479,2.976-5.331v0.001c0.001-0.003,0.002-0.006,0.003-0.009c1.759-4.076,3.148-7.297,5.775-6.355
+			c0.004,0.002,0.007,0.002,0.013,0.005c0.004,0.001,0.01,0.003,0.014,0.005c2.614,0.966,4.006,5.176,5.76,10.509
+			c0.006,0.017,0.011,0.032,0.017,0.048l0.009,0.026c0.799,2.43,2.104,6.399,2.969,7.481c0.867-0.453,2.178-3.484,2.979-5.341
+			c0,0,0,0,0-0.001c0.003-0.006,0.006-0.012,0.008-0.018c1.762-4.065,3.152-7.276,5.773-6.333c0.002,0.001,0.005,0.002,0.01,0.004
+			h0.001c0.003,0.001,0.006,0.002,0.008,0.003c0.513,0.188,0.977,0.505,1.407,0.926V7c0-3.313-2.688-6-6-6H7C3.687,1,1,3.687,1,7
+			v6.901C1.267,14.491,1.521,14.967,1.744,15.247z"/>
+		<polygon points="4.157,25.236 4.175,25.25 4.188,25.26 4.147,25.229 		"/>
+		<path d="M46.568,41.219c-0.004-0.012-0.008-0.023-0.012-0.035c-0.802-2.438-2.111-6.422-2.979-7.508
+			c-0.864,0.453-2.174,3.473-2.975,5.321c-0.002,0.006-0.004,0.011-0.006,0.017c-1.759,4.071-3.147,7.291-5.77,6.357
+			c-0.006-0.002-0.014-0.002-0.02-0.007c-0.009-0.001-0.015-0.005-0.021-0.007c-2.613-0.974-4-5.182-5.752-10.506
+			c-0.007-0.017-0.011-0.033-0.017-0.05l0.004-0.002c-0.801-2.437-2.109-6.421-2.978-7.503c-0.866,0.451-2.176,3.484-2.977,5.34
+			c-0.004,0.01-0.008,0.019-0.012,0.027c-1.759,4.063-3.15,7.271-5.773,6.322c-0.002,0-0.005-0.004-0.006-0.002
+			c-0.004-0.004-0.004-0.002-0.006-0.002c-2.625-0.963-4.016-5.193-5.778-10.549c-0.004-0.012-0.008-0.022-0.011-0.035
+			c-0.802-2.439-2.105-6.405-2.971-7.486c-0.866,0.453-2.177,3.482-2.979,5.337L4.188,25.26L4.18,25.254l1.345,1.018
+			C4.068,29.64,2.861,32.414,1,32.732V41c0,3.313,2.687,6,6,6h34c2.91,0,5.336-2.075,5.883-4.825
+			C46.779,41.86,46.675,41.542,46.568,41.219z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_flanger2.svg b/react/src/svg/fx_flanger2.svg
new file mode 100644
index 0000000..ffed761
--- /dev/null
+++ b/react/src/svg/fx_flanger2.svg
@@ -0,0 +1,194 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Original" display="none">
+	<circle display="inline" cx="24" cy="23.999" r="23"/>
+	<path display="inline" fill="#FFFFFF" d="M70.464,39.718c-0.002,0-0.002,0-0.004,0c-0.006-0.002-0.012-0.003-0.017-0.003
+		c-2.013-0.42-2.751-3.039-4.492-10.979c-0.002-0.009-0.004-0.016-0.005-0.024c-0.614-2.793-1.485-6.752-2.235-8.506
+		c-0.751,1.455-1.621,5.067-2.233,7.609l-1.143-0.348l-1.131-0.396c1.745-7.239,2.48-9.554,4.498-9.159c0.002,0,0.006,0,0.008,0.001
+		h0.001h0.001c0.003,0.001,0.005,0.001,0.008,0.002c2.021,0.411,2.756,3.027,4.503,10.982c0.002,0.006,0.004,0.016,0.005,0.022
+		c0.614,2.794,1.483,6.755,2.234,8.506c0.75-1.451,1.618-5.06,2.231-7.6c0.001-0.012,0.003-0.021,0.007-0.034
+		c1.748-7.271,2.485-9.587,4.514-9.182c0.637,0.127,1.153,0.613,1.153,1.088c0,0.376-0.325,0.631-0.776,0.657
+		c-0.821,0.709-1.898,5.186-2.618,8.18l-1.135-0.372l1.135,0.372c-0.001,0-0.001,0-0.001,0c-0.001,0.007-0.003,0.016-0.005,0.022
+		h0.002c-1.74,7.228-2.478,9.548-4.487,9.164C70.476,39.722,70.47,39.72,70.464,39.718z M16.458,28.942c-0.001,0-0.002,0-0.004,0
+		c-0.004-0.002-0.008-0.002-0.012-0.003c-2.013-0.414-2.75-3.023-4.488-10.939c-0.003-0.015-0.008-0.028-0.01-0.043
+		c-0.613-2.795-1.486-6.772-2.239-8.529c-0.752,1.456-1.625,5.081-2.238,7.628l-2.272-0.743c1.745-7.248,2.481-9.57,4.498-9.178
+		c0.005,0,0.01,0.003,0.013,0.002c0.001,0.001,0.007,0.001,0.012,0.003c2.015,0.413,2.752,3.022,4.491,10.94
+		c0.003,0.015,0.007,0.028,0.011,0.043c0.613,2.794,1.485,6.77,2.239,8.528c0.753-1.457,1.625-5.086,2.237-7.636
+		c0.002-0.005,0.003-0.01,0.004-0.015c1.749-7.259,2.483-9.571,4.51-9.167C23.24,9.841,23.27,9.848,23.3,9.856
+		c1.955,0.466,2.695,3.113,4.413,10.937c0.002,0.009,0.004,0.016,0.006,0.023c0.613,2.794,1.485,6.77,2.239,8.527
+		c0.753-1.458,1.626-5.084,2.239-7.634c0-0.001,0-0.001,0-0.002c1.741-7.244,2.479-9.569,4.49-9.185
+		c0.007,0.001,0.012,0.001,0.02,0.004c0.004-0.002,0.015,0.002,0.021,0.003c2.011,0.42,2.747,3.036,4.488,10.964
+		c0.001,0.006,0.002,0.011,0.003,0.016c0.613,2.796,1.486,6.771,2.239,8.527c0.753-1.456,1.626-5.083,2.239-7.633
+		c0.001-0.006,0.003-0.011,0.004-0.016c1.745-7.259,2.482-9.572,4.51-9.167c0.024,0.004,0.048,0.01,0.068,0.015
+		c1.974,0.455,2.712,3.096,4.439,10.956c0.002,0.011,0.004,0.02,0.005,0.028c0.614,2.794,1.484,6.755,2.235,8.51
+		c0.752-1.457,1.624-5.081,2.236-7.629l2.272,0.743c-1.742,7.246-2.479,9.567-4.495,9.179c-0.004,0-0.008-0.001-0.014-0.001
+		c0-0.002-0.01-0.002-0.015-0.004c-2.017-0.416-2.754-3.033-4.496-10.98c-0.002-0.009-0.006-0.019-0.007-0.028
+		c-0.613-2.789-1.482-6.745-2.232-8.497c-0.753,1.457-1.626,5.085-2.239,7.634c-0.001,0.005-0.003,0.01-0.004,0.016
+		c-1.742,7.246-2.48,9.563-4.497,9.17c-0.004-0.003-0.006-0.003-0.01-0.003h-0.001l-0.001-0.001c-0.003,0-0.005,0-0.01-0.002
+		c-2.017-0.411-2.754-3.021-4.497-10.963c0-0.005-0.001-0.01-0.003-0.017l-0.003-0.013c-0.613-2.79-1.485-6.759-2.238-8.515
+		c-0.752,1.456-1.624,5.082-2.237,7.633c0,0,0,0,0,0.001c-1.744,7.247-2.48,9.571-4.494,9.186c-0.006-0.002-0.007,0.002-0.018-0.004
+		c-0.006,0.002-0.012-0.003-0.017-0.003c-2.013-0.418-2.751-3.031-4.49-10.955c-0.002-0.008-0.004-0.016-0.006-0.023
+		c-0.613-2.794-1.485-6.771-2.238-8.526c-0.752,1.455-1.623,5.075-2.236,7.622l0,0c-0.001,0.003-0.003,0.007-0.003,0.01
+		c-1.744,7.252-2.48,9.576-4.497,9.188C16.467,28.944,16.463,28.944,16.458,28.942z M-37.549,18.168c-0.001,0-0.001,0-0.002-0.001
+		c-0.003-0.001-0.005-0.001-0.009-0.002c-2.018-0.411-2.754-3.023-4.499-10.97c-0.002-0.008-0.004-0.016-0.005-0.022
+		c-0.613-2.795-1.484-6.765-2.236-8.519c-0.753,1.456-1.626,5.083-2.24,7.633l-1.136-0.372l1.136,0.372
+		c-0.002,0.008-0.004,0.017-0.007,0.025h0.001c-1.741,7.233-2.477,9.55-4.49,9.162c-0.005,0-0.008-0.002-0.015-0.003
+		c-0.004-0.003-0.01-0.002-0.015-0.003c-2.015-0.415-2.752-3.032-4.498-10.981c-0.001-0.009-0.004-0.018-0.005-0.026
+		c-0.613-2.792-1.482-6.749-2.233-8.499c-0.752,1.456-1.625,5.082-2.238,7.63l0,0c0,0.002-0.001,0.003-0.001,0.004
+		c-1.744,7.25-2.48,9.574-4.497,9.185c-0.005-0.001-0.007-0.003-0.014-0.003c-0.004-0.003-0.01-0.002-0.015-0.003
+		c-2.014-0.415-2.752-3.028-4.493-10.963c-0.001-0.005-0.003-0.011-0.004-0.016l-0.001-0.005c-0.613-2.793-1.486-6.768-2.238-8.523
+		c-0.752,1.457-1.625,5.08-2.237,7.627l-2.273-0.743c1.745-7.249,2.481-9.569,4.498-9.178c0.005,0,0.011,0.001,0.012,0.002
+		c0.003,0,0.009,0.001,0.014,0.002c2.016,0.414,2.753,3.026,4.495,10.964c0.002,0.006,0.003,0.011,0.004,0.017
+		c0.613,2.795,1.486,6.77,2.239,8.528c0.752-1.458,1.625-5.086,2.238-7.635c0.001-0.005,0.002-0.009,0.004-0.014
+		c1.747-7.26,2.482-9.573,4.509-9.168c0.022,0.004,0.044,0.009,0.066,0.014c1.976,0.451,2.715,3.091,4.443,10.964
+		c0.002,0.01,0.004,0.019,0.006,0.028c0.613,2.793,1.483,6.749,2.233,8.502c0.75-1.454,1.621-5.068,2.233-7.609
+		c0.002-0.008,0.004-0.017,0.005-0.025c1.745-7.253,2.483-9.576,4.5-9.185c0.004,0.001,0.008,0.002,0.013,0.002
+		c0,0,0.008,0.002,0.013,0.002c2.017,0.415,2.754,3.031,4.498,10.981c0.002,0.008,0.003,0.015,0.005,0.023
+		c0.613,2.792,1.483,6.753,2.234,8.507c0.753-1.456,1.626-5.085,2.239-7.635c0.001-0.005,0.003-0.01,0.004-0.015
+		c1.746-7.259,2.483-9.572,4.51-9.167c0.031,0.006,0.062,0.014,0.092,0.021c1.955,0.468,2.695,3.115,4.412,10.938
+		c0.002,0.008,0.003,0.015,0.005,0.023c0.613,2.794,1.486,6.77,2.239,8.527c0.751-1.452,1.621-5.062,2.233-7.61
+		c0.002-0.009,0.003-0.017,0.005-0.025c1.746-7.253,2.482-9.575,4.499-9.185c0.004,0,0.007,0,0.013,0.002
+		c-0.002,0,0.007,0.002,0.012,0.003c2.016,0.414,2.752,3.027,4.497,10.97c0.002,0.006,0.004,0.015,0.005,0.021
+		c0.613,2.794,1.484,6.762,2.236,8.517c0.754-1.456,1.626-5.084,2.24-7.634c0.001-0.005,0.001-0.01,0.003-0.015
+		c1.747-7.259,2.483-9.572,4.509-9.168C-3.773,4.45-3.751,4.455-3.729,4.46c1.976,0.45,2.714,3.09,4.442,10.963
+		c0.001,0.002,0.001,0.003,0.001,0.003c0.613,2.796,1.485,6.771,2.239,8.528c0.752-1.454,1.625-5.079,2.238-7.628l2.272,0.743
+		c-1.746,7.252-2.482,9.572-4.5,9.179c-0.003-0.001-0.006-0.001-0.01-0.001c-0.002-0.002-0.006-0.002-0.009-0.004
+		c-2.02-0.41-2.757-3.024-4.501-10.974c0-0.002,0-0.004-0.001-0.005l0-0.005c-0.614-2.793-1.486-6.766-2.239-8.523
+		c-0.753,1.457-1.625,5.085-2.239,7.635c-0.001,0.006-0.002,0.01-0.004,0.015c-1.74,7.236-2.477,9.557-4.491,9.17
+		c-0.006,0-0.012,0.002-0.017-0.003c-0.011,0.001-0.012-0.002-0.017-0.003c-2.015-0.417-2.751-3.037-4.495-10.979
+		c-0.002-0.008-0.003-0.015-0.005-0.022c-0.613-2.79-1.483-6.753-2.234-8.506c-0.75,1.452-1.62,5.061-2.232,7.609
+		c-0.002,0.009-0.004,0.017-0.006,0.025c-1.745,7.25-2.482,9.574-4.498,9.185c-0.004,0-0.008-0.003-0.014-0.002
+		c-0.004-0.003-0.01-0.003-0.015-0.003c-2.015-0.416-2.751-3.027-4.492-10.956c-0.002-0.007-0.003-0.016-0.006-0.022
+		c-0.613-2.795-1.485-6.771-2.238-8.528c-0.752,1.457-1.625,5.084-2.239,7.635c-0.001,0.005-0.003,0.009-0.003,0.014
+		c-1.743,7.245-2.479,9.564-4.499,9.17C-37.543,18.168-37.547,18.168-37.549,18.168z M-62.314,2.853l1.137,0.372L-62.314,2.853z
+		 M-78.053,10.083c-0.001,0-0.001,0-0.001,0c-0.001-0.001-0.009-0.001-0.013-0.002c-2.017-0.414-2.753-3.028-4.497-10.973
+		c-0.001-0.005-0.002-0.01-0.004-0.016c-0.613-2.793-1.485-6.763-2.237-8.517c-0.753,1.457-1.625,5.084-2.238,7.634
+		c-0.107,0.446-0.698,0.642-1.331,0.437c-0.628-0.206-1.049-0.733-0.942-1.179c1.749-7.271,2.484-9.587,4.513-9.183
+		c0.031,0.006,0.061,0.013,0.091,0.02c1.957,0.468,2.696,3.118,4.418,10.958c0.001,0.005,0.002,0.01,0.003,0.016
+		c0.613,2.792,1.484,6.76,2.236,8.515c0.752-1.456,1.625-5.081,2.238-7.63l2.272,0.743c-1.744,7.251-2.481,9.572-4.498,9.181
+		C-78.046,10.085-78.049,10.084-78.053,10.083z"/>
+	<path display="inline" fill="#FFFFFF" d="M144.627,63.129c-0.002,0-0.002,0-0.004,0c-0.006-0.002-0.012-0.004-0.017-0.004
+		c-2.012-0.419-2.747-3.033-4.487-10.955c-0.002-0.009-0.003-0.016-0.006-0.023c0-0.002,0-0.003,0-0.003
+		c-0.613-2.795-1.486-6.77-2.239-8.527c-0.749,1.449-1.618,5.052-2.228,7.583h-0.004c-0.001,0.017-0.005,0.032-0.009,0.049
+		c-1.744,7.258-2.48,9.58-4.501,9.186c-0.003-0.001-0.005-0.001-0.009-0.001h-0.001l-0.001-0.003c-0.002,0-0.005,0-0.007-0.001
+		c-2.019-0.41-2.757-3.024-4.504-10.978c-0.003-0.017-0.007-0.033-0.009-0.05c-0.613-2.791-1.481-6.73-2.229-8.478
+		c-0.753,1.456-1.626,5.085-2.241,7.633c-0.001,0.006-0.002,0.011-0.004,0.014c-1.739,7.246-2.478,9.565-4.496,9.171
+		c-0.002-0.001-0.006-0.001-0.009-0.001l-0.001-0.002h-0.002c-0.002,0-0.005,0-0.008-0.002c-2.016-0.411-2.754-3.021-4.499-10.964
+		c-0.001-0.004-0.002-0.01-0.003-0.016l-0.005-0.025c-0.613-2.787-1.483-6.75-2.234-8.504c-0.754,1.457-1.626,5.085-2.24,7.636
+		c0,0.001,0,0.003-0.001,0.003c-1.742,7.241-2.479,9.564-4.489,9.183c-0.008-0.002-0.012-0.002-0.02-0.003
+		c-0.005,0-0.013-0.004-0.019-0.006c-2.014-0.419-2.752-3.033-4.488-10.954c-0.001-0.007-0.004-0.016-0.005-0.022
+		c-0.614-2.795-1.486-6.77-2.24-8.527c-0.752,1.458-1.625,5.086-2.24,7.634c-0.001,0.005-0.002,0.01-0.003,0.015
+		c-1.74,7.247-2.479,9.563-4.497,9.17c-0.003,0-0.006-0.001-0.009-0.001H90.62h-0.001c-0.002,0-0.005-0.003-0.009-0.003
+		c-2.019-0.41-2.755-3.028-4.502-10.981c-0.002-0.009-0.003-0.015-0.006-0.023c-0.613-2.793-1.484-6.755-2.235-8.507
+		c-0.751,1.452-1.622,5.067-2.232,7.61l-0.001-0.002c-0.002,0.008-0.004,0.017-0.006,0.025c-1.744,7.258-2.479,9.58-4.5,9.186
+		c-0.003-0.001-0.006-0.001-0.01-0.001l0,0l-0.001-0.003c-0.002,0-0.007,0-0.008-0.001c-2.021-0.411-2.759-3.021-4.497-10.951
+		c-0.003-0.009-0.006-0.02-0.007-0.026L72.6,38.649c-0.611-2.786-1.482-6.748-2.233-8.502c-0.75,1.454-1.62,5.069-2.232,7.61
+		l-1.143-0.35l0.039,0.013l-0.021-0.005l1.113,0.389c-1.739,7.226-2.476,9.545-4.487,9.163c-0.006-0.002-0.014-0.003-0.019-0.005
+		c-0.007,0-0.013-0.002-0.02-0.004c-2.014-0.419-2.749-3.036-4.488-10.963c-0.001-0.003-0.002-0.009-0.002-0.016
+		c-0.616-2.795-1.488-6.77-2.241-8.528c-0.752,1.457-1.625,5.081-2.239,7.632c0,0,0,0.002-0.001,0.002
+		c-1.74,7.246-2.477,9.571-4.493,9.188c-0.006-0.001-0.013-0.003-0.019-0.006c-0.007,0-0.012-0.002-0.019-0.003
+		c-2.011-0.42-2.747-3.031-4.486-10.951v-0.002c-0.002-0.008-0.004-0.018-0.006-0.023c-0.613-2.795-1.486-6.771-2.239-8.528
+		c-0.753,1.457-1.626,5.085-2.239,7.635c-0.001,0.005-0.002,0.011-0.003,0.015c-1.745,7.246-2.481,9.563-4.5,9.17
+		c-0.002-0.002-0.006-0.002-0.007-0.002h-0.001l-0.002-0.001c-0.003,0-0.006,0-0.008,0c-2.019-0.413-2.754-3.025-4.5-10.972
+		c-0.002-0.007-0.003-0.017-0.005-0.024c-0.612-2.793-1.484-6.762-2.236-8.518c-0.753,1.457-1.627,5.084-2.239,7.635l-1.136-0.372
+		l1.136,0.372c-0.002,0.008-0.005,0.017-0.008,0.025h0.002c-1.741,7.232-2.478,9.549-4.491,9.16c-0.004,0-0.01-0.003-0.015-0.001
+		c-0.006-0.006-0.009-0.004-0.014-0.004c-2.016-0.415-2.752-3.034-4.499-10.981c-0.001-0.009-0.002-0.017-0.004-0.026
+		c-0.613-2.793-1.483-6.749-2.233-8.499c-0.753,1.455-1.625,5.082-2.238,7.63l0,0c-0.001,0.001-0.001,0.003-0.001,0.005
+		c-1.745,7.25-2.481,9.573-4.497,9.185c-0.004-0.001-0.01,0-0.015-0.003c-0.006,0-0.01-0.003-0.015-0.003
+		c-2.014-0.415-2.751-3.029-4.493-10.964C5.102,25.216,5.1,25.21,5.099,25.205l-0.001-0.006c-0.613-2.793-1.485-6.768-2.238-8.523
+		c-0.753,1.456-1.624,5.081-2.237,7.629l-2.273-0.744c1.745-7.248,2.48-9.568,4.497-9.177c0.005,0,0.014,0.003,0.013,0.002
+		c0.005,0.001,0.008,0.002,0.013,0.002c2.016,0.413,2.752,3.026,4.496,10.965c0.001,0.006,0.002,0.011,0.004,0.015
+		c0.613,2.795,1.485,6.773,2.238,8.529c0.753-1.457,1.625-5.085,2.239-7.635c0.001-0.004,0.003-0.009,0.003-0.013
+		c1.748-7.261,2.484-9.574,4.509-9.169c0.023,0.004,0.045,0.009,0.067,0.014c1.977,0.451,2.715,3.09,4.443,10.965
+		c0.003,0.011,0.004,0.019,0.005,0.029c0.613,2.793,1.484,6.748,2.234,8.499c0.751-1.453,1.621-5.067,2.234-7.607
+		c0.001-0.009,0.003-0.017,0.004-0.025c1.746-7.254,2.483-9.575,4.5-9.185c0.005,0.002,0.007,0,0.013,0.002
+		c-0.001-0.002,0.009,0.003,0.013,0.003c2.018,0.414,2.754,3.03,4.499,10.982c0.002,0.007,0.003,0.014,0.004,0.021
+		c0.613,2.79,1.484,6.754,2.235,8.507c0.751-1.455,1.623-5.078,2.236-7.625h0.001c0-0.003,0.001-0.005,0.002-0.009
+		c1.749-7.271,2.484-9.587,4.513-9.183c0.032,0.007,0.063,0.013,0.093,0.021c1.955,0.468,2.694,3.114,4.411,10.938
+		c0.002,0.008,0.004,0.016,0.005,0.021l0.008,0.027c0.61,2.785,1.48,6.748,2.231,8.501c0.755-1.455,1.626-5.082,2.239-7.632
+		c0,0,0.001-0.001,0.001-0.003c1.747-7.257,2.482-9.578,4.501-9.185c0.004,0.002,0.006,0.002,0.01,0.002l0.001,0.001h0.001
+		c0.004,0.001,0.006,0.001,0.009,0.002c2.018,0.411,2.754,3.023,4.498,10.966c0.001,0.007,0.004,0.011,0.005,0.016
+		c0.613,2.794,1.484,6.771,2.238,8.528c0.751-1.454,1.621-5.068,2.233-7.611l1.142,0.347l-0.036-0.011l0.018,0.007l-1.111-0.389
+		c1.746-7.253,2.481-9.565,4.508-9.159c0.023,0.003,0.047,0.008,0.069,0.015c1.97,0.452,2.709,3.09,4.432,10.937
+		c0.004,0.011,0.007,0.02,0.008,0.028c0.613,2.797,1.484,6.773,2.239,8.53c0.753-1.456,1.626-5.087,2.238-7.637
+		c0.002-0.009,0.003-0.017,0.006-0.023l0,0c1.743-7.24,2.479-9.555,4.498-9.161c0.002,0.002,0.005,0.002,0.007,0.002h0.001h0.003
+		c0.002,0.001,0.004,0.001,0.008,0.003c2.019,0.411,2.755,3.026,4.502,10.98c0.003,0.009,0.004,0.017,0.005,0.023
+		c0.614,2.795,1.484,6.755,2.235,8.507c0.753-1.454,1.625-5.085,2.237-7.634c0.002-0.006,0.004-0.01,0.005-0.015
+		c1.746-7.26,2.484-9.571,4.51-9.167c0.03,0.005,0.061,0.013,0.09,0.02c1.955,0.467,2.696,3.112,4.415,10.938
+		c0.003,0.009,0.005,0.018,0.006,0.023c0.612,2.796,1.483,6.769,2.238,8.528c0.752-1.458,1.625-5.083,2.238-7.629
+		c0-0.002,0-0.004,0.002-0.005c1.74-7.246,2.477-9.571,4.491-9.188c0.007,0.003,0.012,0.001,0.02,0.005
+		c0.006,0,0.013,0.002,0.019,0.003c2.012,0.419,2.747,3.033,4.487,10.954c0.001,0.003,0.001,0.005,0.002,0.008
+		c0.001,0.006,0.002,0.012,0.003,0.017c0.615,2.795,1.486,6.771,2.24,8.528c0.753-1.457,1.625-5.085,2.238-7.634
+		c0.001-0.004,0.002-0.009,0.004-0.014c1.747-7.26,2.483-9.572,4.51-9.168c0.023,0.004,0.047,0.01,0.07,0.015
+		c1.973,0.454,2.712,3.097,4.44,10.968c0.003,0.018,0.007,0.033,0.009,0.047c0.613,2.792,1.481,6.73,2.229,8.479
+		c0.753-1.458,1.625-5.085,2.239-7.636l0,0l1.135,0.372l-1.135-0.372c0.003-0.016,0.007-0.033,0.014-0.049h-0.004
+		c1.744-7.219,2.478-9.528,4.492-9.136c0.002,0.002,0.007,0.002,0.009,0.002h0.001l0.001,0.002c0.003,0,0.006,0,0.009,0.002
+		c2.019,0.41,2.754,3.026,4.502,10.979c0.002,0.009,0.003,0.017,0.006,0.025c0,0.002,0,0.002,0,0.002
+		c0.612,2.785,1.482,6.748,2.233,8.504c0.751-1.455,1.621-5.07,2.233-7.612l0,0c0.002-0.006,0.004-0.014,0.007-0.022
+		c1.744-7.271,2.481-9.588,4.513-9.182c0.638,0.126,1.152,0.613,1.152,1.087c0,0.376-0.324,0.631-0.775,0.657
+		c-0.823,0.709-1.899,5.188-2.618,8.181c-0.001,0.007-0.005,0.016-0.006,0.022h0.001c-1.741,7.228-2.478,9.548-4.487,9.164
+		C144.639,63.13,144.633,63.13,144.627,63.129z M39.988,32.022l1.136,0.372L39.988,32.022z M11.849,26.263l1.137,0.371
+		L11.849,26.263z M-3.89,33.494c0,0-0.001-0.002-0.001-0.002c0.001,0.002-0.008-0.002-0.013-0.002
+		c-2.017-0.414-2.753-3.027-4.498-10.973c-0.001-0.006-0.001-0.011-0.003-0.017c-0.613-2.792-1.485-6.762-2.237-8.517
+		c-0.753,1.457-1.625,5.085-2.239,7.634c-0.107,0.447-0.7,0.645-1.331,0.437c-0.627-0.205-1.048-0.731-0.942-1.178
+		c1.749-7.271,2.485-9.589,4.514-9.184c0.031,0.007,0.061,0.014,0.091,0.021c1.957,0.467,2.697,3.118,4.418,10.958
+		c0.001,0.006,0.002,0.011,0.004,0.016c0.613,2.792,1.484,6.76,2.236,8.515c0.752-1.456,1.624-5.081,2.237-7.63l2.273,0.743
+		c-1.745,7.251-2.48,9.571-4.498,9.181C-3.882,33.494-3.885,33.494-3.89,33.494z"/>
+</g>
+<g id="Combined">
+	<g>
+		<path d="M38.945,23.334c-0.613-2.79-1.485-6.759-2.238-8.515c-0.752,1.456-1.624,5.082-2.237,7.633c0,0,0,0,0,0.001
+			c-0.391,1.622-0.729,2.984-1.044,4.138c0.288,1.193,0.598,2.567,0.948,4.166c0.002,0.007,0.003,0.014,0.004,0.021
+			c0.613,2.79,1.484,6.754,2.235,8.507c0.751-1.455,1.623-5.078,2.236-7.625h0.001c0-0.003,0.001-0.005,0.002-0.009
+			c0.39-1.622,0.729-2.984,1.043-4.138c-0.287-1.189-0.595-2.558-0.944-4.15c0-0.005-0.001-0.01-0.003-0.017L38.945,23.334z"/>
+		<path d="M5.092,16.735c0.033-0.136,0.067-0.279,0.099-0.409l2.272,0.743c-0.389,1.617-0.727,2.977-1.042,4.128
+			c0.288,1.19,0.596,2.561,0.946,4.155c0.001,0.006,0.002,0.011,0.004,0.015c0.613,2.795,1.485,6.773,2.238,8.529
+			c0.753-1.457,1.625-5.085,2.239-7.635c0.001-0.004,0.003-0.009,0.003-0.013c0.389-1.615,0.726-2.973,1.04-4.124
+			c-0.285-1.183-0.592-2.544-0.939-4.125c-0.003-0.015-0.008-0.028-0.01-0.043c-0.613-2.795-1.486-6.772-2.239-8.529
+			c-0.752,1.456-1.625,5.081-2.238,7.628l-2.272-0.743c1.745-7.248,2.481-9.57,4.498-9.178c0.005,0,0.01,0.003,0.013,0.002
+			c0.001,0.001,0.007,0.001,0.012,0.003c2.015,0.413,2.752,3.022,4.491,10.94c0.003,0.015,0.007,0.028,0.011,0.043
+			c0.012,0.053,0.025,0.113,0.037,0.167c0.584-1.045,1.223-1.387,2.107-1.21c0.023,0.004,0.045,0.009,0.067,0.014
+			c0.913,0.208,1.562,0.894,2.166,2.337c0.033-0.137,0.068-0.282,0.1-0.414c0.002-0.005,0.003-0.01,0.004-0.015
+			c1.749-7.259,2.483-9.571,4.51-9.167c0.031,0.006,0.06,0.013,0.09,0.021c1.955,0.466,2.694,3.113,4.412,10.937
+			c0.002,0.009,0.003,0.016,0.005,0.023c0.012,0.053,0.022,0.113,0.034,0.168c0.581-1.04,1.21-1.385,2.087-1.215
+			c0.005,0.002-0.005,0,0.001,0.002c-0.001-0.002-0.016,0.003-0.012,0.003c0.941,0.193,1.555,0.878,2.172,2.353
+			C32.031,21.989,32,21.843,32,21.71c0-0.001,0-0.001,0-0.002c2-7.244,2.577-9.569,4.589-9.185c0.007,0.001,0.11,0.001,0.118,0.004
+			c0.004-0.002,0.015,0.002,0.021,0.003c2.011,0.42,2.747,3.036,4.488,10.964c0.001,0.006,0.002,0.011,0.003,0.016
+			c0.012,0.054,0.025,0.115,0.037,0.17c0.585-1.045,1.224-1.387,2.108-1.211c0.032,0.007,0.063,0.013,0.093,0.021
+			c0.899,0.215,1.541,0.901,2.14,2.331c0.033-0.138,0.068-0.284,0.101-0.417c0.001-0.006,0.003-0.011,0.004-0.016
+			c0.377-1.566,0.705-2.889,1.011-4.018C44.973,9.393,35.469,1,24,1C14.707,1,6.707,6.514,3.079,14.446
+			C3.911,14.694,4.523,15.375,5.092,16.735z"/>
+		<path d="M42.244,27.984c0.402,1.631,0.824,3.142,1.215,4.053c0.359-0.695,0.746-1.892,1.119-3.224
+			c-0.402-1.632-0.824-3.143-1.215-4.054C43.004,25.456,42.617,26.652,42.244,27.984z"/>
+		<path d="M28.742,25.288c0.402,1.632,0.824,3.144,1.216,4.056c0.359-0.696,0.747-1.893,1.12-3.226
+			c-0.402-1.632-0.825-3.144-1.216-4.056C29.503,22.759,29.115,23.956,28.742,25.288z"/>
+		<path d="M4.074,20.726c-0.402-1.63-0.824-3.139-1.214-4.05c-0.36,0.697-0.748,1.896-1.121,3.23
+			c0.401,1.629,0.823,3.137,1.214,4.048C3.313,23.258,3.7,22.06,4.074,20.726z"/>
+		<path d="M23.207,12.127c-0.752,1.455-1.623,5.075-2.236,7.622c-0.001,0.003-0.003,0.007-0.003,0.01
+			c-0.39,1.622-0.728,2.984-1.043,4.138c0.288,1.192,0.597,2.564,0.947,4.162c0.003,0.011,0.004,0.019,0.005,0.029
+			c0.613,2.793,1.484,6.748,2.234,8.499c0.751-1.453,1.621-5.067,2.234-7.607c0.001-0.009,0.003-0.017,0.004-0.025
+			c0.391-1.622,0.729-2.984,1.044-4.137c-0.286-1.187-0.594-2.552-0.942-4.14c-0.002-0.008-0.004-0.016-0.006-0.023
+			C24.832,17.859,23.96,13.883,23.207,12.127z"/>
+		<path d="M43.47,34.332c-0.004-0.003-0.006-0.002-0.01-0.002l-0.001,0.001h-0.001c-0.003,0-0.005,0.004-0.01,0.002
+			c-0.943-0.192-1.605-0.869-2.223-2.344c-0.034,0.139-0.069,0.298-0.102,0.432c-0.001,0.005-0.002,0.037-0.003,0.041
+			c-1.745,7.246-2.289,9.616-4.307,9.223C36.813,41.683,37,41.789,37,41.789V42h-0.389c-0.003,0-0.006,0-0.008,0
+			c-2.019-1-2.754-3.236-4.5-11.183c-0.002-0.007-0.003-0.228-0.005-0.235c-0.011-0.05-0.023-0.104-0.034-0.154
+			c-0.58,1.036-1.214,1.388-2.089,1.22c-0.006-0.002-0.007,0.011-0.018,0.005c-0.006,0.002-0.012,0.014-0.017,0.014
+			c-0.94-0.195-1.602-0.845-2.218-2.316c-0.033,0.139-0.068,0.354-0.101,0.486C27.621,29.844,27.618,30,27.615,30h0.002
+			c-1.741,7-2.478,9.41-4.491,9.021c-0.004,0-0.01-0.141-0.015-0.139c-0.006-0.006-0.009-0.003-0.014-0.003
+			c-2.016-0.415-2.752-3.032-4.499-10.979c-0.001-0.009-0.002-0.014-0.004-0.023c-0.01-0.045-0.021-0.087-0.031-0.132
+			c-0.581,1.039-1.215,1.399-2.092,1.229C16.467,28.973,16.463,29,16.458,29c-0.001,0-0.002,0-0.004,0
+			c-0.004,0-0.008-0.031-0.012-0.032c-0.941-0.193-1.603-0.906-2.219-2.378c-0.033,0.137-0.067,0.28-0.099,0.411
+			c-0.001,0.001-0.001,0.002-0.001,0.004c-1.745,7.25-2.481,9.572-4.497,9.184c-0.004-0.001-0.01-0.002-0.015-0.005
+			c-0.006,0-0.01-0.007-0.015-0.007c-2.014-0.415-2.751-3.037-4.493-10.972C5.102,25.2,5.1,25.179,5.099,25.174l-0.001-0.037
+			c-0.012-0.053-0.025-0.175-0.037-0.229C4.479,25.95,3.843,26,2.963,26c-0.003,0-0.006,0-0.01,0c-0.002,0-0.02,0.121-0.023,0.119
+			c-0.783-0.159-1.382-0.58-1.916-1.558C1.314,37.005,11.486,47,24,47c9.046,0,16.868-5.225,20.624-12.818
+			C44.284,34.374,43.907,34.417,43.47,34.332z"/>
+		<path d="M15.241,22.597c0.402,1.632,0.825,3.144,1.216,4.056c0.36-0.696,0.747-1.894,1.119-3.227
+			c-0.402-1.632-0.824-3.143-1.215-4.054C16.001,20.067,15.614,21.264,15.241,22.597z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_function.svg b/react/src/svg/fx_function.svg
new file mode 100644
index 0000000..fb59658
--- /dev/null
+++ b/react/src/svg/fx_function.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	
+		<text transform="matrix(1 0 0 1 9.8389 32.5723)" display="inline" fill="#FFFFFF" font-family="'PalatinoLinotype-BoldItalic'" font-size="34">fx</text>
+</g>
+<g id="Composed">
+	<path d="M41,1H7C3.688,1,1,3.687,1,7v34c0,3.313,2.688,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z M18.538,18.776
+		l-1.295,5.761c-0.531,2.369-1.052,4.46-1.561,6.275c-0.675,2.435-1.336,4.28-1.984,5.537c-0.647,1.256-1.469,2.385-2.465,3.387
+		c-0.996,1.001-1.893,1.69-2.689,2.066c-0.498,0.232-0.974,0.349-1.428,0.349c-0.398,0-0.819-0.1-1.262-0.299
+		c0.531-1.372,0.896-2.601,1.096-3.686l0.531-0.1c0.432,1.007,0.985,1.511,1.66,1.511c0.232,0,0.457-0.059,0.672-0.174
+		c0.216-0.117,0.417-0.308,0.606-0.573c0.188-0.266,0.423-0.946,0.706-2.042s0.623-2.695,1.021-4.798l1.229-6.425l1.295-6.79
+		c-0.631-0.022-1.135-0.033-1.511-0.033c-0.576,0-1.085,0.011-1.527,0.033l-0.116-0.149l0.116-0.598l0.183-0.183
+		c0.254-0.088,0.758-0.243,1.511-0.465c0.752-0.221,1.333-0.426,1.743-0.614c0.033-0.077,0.105-0.382,0.216-0.913
+		c0.188-0.819,0.354-1.408,0.498-1.768c0.144-0.359,0.393-0.755,0.747-1.187c0.354-0.432,1.001-1.046,1.942-1.843
+		c0.94-0.797,1.812-1.48,2.615-2.05c0.802-0.57,1.405-0.932,1.81-1.087c0.404-0.155,0.849-0.232,1.336-0.232
+		c0.52,0,1.018,0.094,1.494,0.282c-0.432,1.472-0.747,2.905-0.946,4.3l-0.498,0.116c-0.853-1.306-1.705-1.959-2.557-1.959
+		c-0.31,0-0.601,0.097-0.872,0.291c-0.271,0.194-0.481,0.454-0.631,0.78c-0.149,0.327-0.363,1.06-0.639,2.2
+		c-0.277,1.14-0.509,2.252-0.697,3.337h0.382c0.221,0,0.838-0.027,1.851-0.083c1.013-0.055,1.674-0.116,1.984-0.183l0.166,0.266
+		c-0.232,0.631-0.393,1.157-0.481,1.577l-0.183,0.166c-0.388-0.022-1.151-0.033-2.291-0.033
+		C19.396,18.743,18.804,18.754,18.538,18.776z M37.364,20.403l-0.714,0.133l-0.315-0.946c-0.232-0.11-0.448-0.166-0.647-0.166
+		c-0.598,0-1.195,0.269-1.793,0.805c-0.598,0.537-1.483,1.658-2.656,3.362c0.343,2.258,0.642,3.833,0.896,4.724
+		s0.515,1.475,0.78,1.751s0.537,0.415,0.813,0.415c0.498,0,1.345-0.515,2.54-1.544l0.199,0.017l0.382,0.614l-0.033,0.199
+		c-1.937,1.693-3.201,2.703-3.794,3.03c-0.592,0.326-1.109,0.489-1.552,0.489c-0.509,0-0.969-0.199-1.378-0.598
+		s-0.705-0.94-0.889-1.627c-0.182-0.687-0.423-2.003-0.722-3.951c-1.295,1.882-2.216,3.157-2.765,3.827
+		c-0.547,0.669-0.995,1.164-1.344,1.485c-0.349,0.321-0.687,0.545-1.013,0.673c-0.327,0.127-0.667,0.19-1.021,0.19
+		c-0.222,0-0.396-0.02-0.523-0.058c-0.127-0.039-0.435-0.169-0.921-0.391c0.177-0.487,0.321-1.106,0.432-1.859
+		c0.11-0.753,0.166-1.192,0.166-1.32c0-0.127-0.006-0.251-0.017-0.373l0.83-0.083l0.199,1.063c0.332,0.133,0.625,0.199,0.88,0.199
+		c0.387,0,0.808-0.142,1.262-0.423c0.454-0.283,1.096-0.966,1.926-2.051c0.83-1.084,1.367-1.82,1.61-2.208
+		c-0.343-2.059-0.606-3.505-0.788-4.341c-0.184-0.835-0.449-1.383-0.797-1.644c-0.35-0.26-0.689-0.39-1.021-0.39
+		c-0.421,0-0.853,0.144-1.295,0.432c-0.443,0.288-0.775,0.637-0.996,1.046l-0.199,0.066l-0.548-0.315l-0.033-0.183
+		c1.106-1.749,1.749-2.883,1.926-3.403c0.886-0.454,1.721-0.681,2.507-0.681c1.052,0,1.849,0.285,2.391,0.855
+		c0.542,0.57,0.907,1.201,1.096,1.893c0.188,0.692,0.371,1.729,0.548,3.113c1.594-2.335,2.676-3.791,3.245-4.366
+		c0.57-0.575,1.077-0.963,1.52-1.162s0.863-0.299,1.262-0.299c0.321,0,0.703,0.089,1.146,0.266
+		C37.757,17.609,37.497,18.854,37.364,20.403z"/>
+</g>
+</svg>
diff --git a/react/src/svg/fx_gate.svg b/react/src/svg/fx_gate.svg
new file mode 100644
index 0000000..8f2462a
--- /dev/null
+++ b/react/src/svg/fx_gate.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<polyline display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" points="-22,12.5 24.5,12.5 24.5,32.5 62,32.5 	"/>
+</g>
+<g id="Combined">
+	<g>
+		<path d="M27,10v20h20V7c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v3H27z"/>
+		<path d="M22,35V15H1v26c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6v-6H22z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_generator.svg b/react/src/svg/fx_generator.svg
new file mode 100644
index 0000000..b77ef00
--- /dev/null
+++ b/react/src/svg/fx_generator.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1_1_" display="none">
+	<circle display="inline" cx="24" cy="23.999" r="23"/>
+	<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<path id="full_sin_2_" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" d="M-4.64,16.94
+		c1.398,3.74,2.795,7.481,4.388,7.481 M4.129,16.94c-1.397,3.739-2.793,7.481-4.386,7.481 M4.128,16.94
+		c1.397-3.74,2.795-7.481,4.387-7.481 M12.896,16.941C11.5,13.2,10.104,9.459,8.511,9.459 M12.896,16.942
+		c1.398,3.741,2.795,7.481,4.385,7.481 M21.665,16.942c-1.398,3.741-2.795,7.481-4.387,7.481 M21.665,16.943
+		c1.396-3.741,2.792-7.481,4.385-7.481 M30.432,16.943c-1.396-3.741-2.793-7.481-4.386-7.481 M30.432,16.941
+		c1.397,3.74,2.793,7.481,4.387,7.481 M39.197,16.941c-1.396,3.74-2.793,7.481-4.387,7.481 M39.197,16.941
+		c1.398-3.74,2.796-7.48,4.387-7.48 M47.966,16.942c-1.396-3.741-2.794-7.481-4.385-7.481 M47.966,16.941
+		c1.396,3.74,2.793,7.481,4.39,7.481 M56.732,16.941c-1.396,3.74-2.791,7.481-4.385,7.481 M56.732,16.942
+		c1.398-3.741,2.793-7.481,4.388-7.481 M65.501,16.942c-1.397-3.741-2.793-7.481-4.388-7.481 M65.501,16.94
+		c1.396,3.74,2.793,7.481,4.388,7.481 M74.27,16.94c-1.396,3.739-2.793,7.481-4.386,7.481 M74.27,16.94
+		c1.396-3.74,2.791-7.481,4.385-7.481 M83.038,16.941c-1.397-3.741-2.797-7.482-4.388-7.482 M83.038,16.942
+		c1.396,3.741,2.795,7.481,4.385,7.481 M91.807,16.942c-1.396,3.741-2.795,7.481-4.386,7.481"/>
+</g>
+<g>
+	<path d="M2.705,16.465c0.006-0.017,0.012-0.033,0.018-0.05c1.761-4.714,3.153-8.439,5.775-8.456c0.006,0,0.01,0.001,0.015,0
+		c0.003,0.001,0.01,0,0.015,0c2.623,0.017,4.014,3.742,5.773,8.456c0.004,0.01,0.007,0.02,0.011,0.03
+		c0.803,2.147,2.106,5.629,2.969,6.396c0.866-0.769,2.177-4.275,2.979-6.421h0c0,0,0-0.001,0-0.001
+		c1.76-4.716,3.15-8.442,5.775-8.457c0.004,0,0.007,0,0.013,0c0.004,0,0.009,0,0.013,0c2.616,0.014,4.007,3.717,5.76,8.412
+		c0.006,0.014,0.011,0.028,0.017,0.042l0.006,0.015c0.8,2.141,2.106,5.639,2.972,6.408c0.867-0.77,2.176-4.276,2.978-6.421
+		c0.001-0.003,0.002-0.007,0.003-0.01c1.763-4.712,3.155-8.436,5.778-8.446c0.002,0,0.005,0,0.01,0h0.001c0.003,0,0.006,0,0.008,0
+		c1.41,0.005,2.463,1.087,3.408,2.811V7c0-3.313-2.688-6-6-6H7C3.687,1,1,3.687,1,7v13.725C1.614,19.38,2.242,17.704,2.705,16.465z"
+		/>
+	<path d="M46.572,17.496c-0.004-0.01-0.008-0.02-0.012-0.03c-0.801-2.146-2.109-5.654-2.978-6.423
+		c-0.866,0.768-2.176,4.271-2.978,6.415c-0.001,0.003-0.002,0.006-0.004,0.009c-1.757,4.706-3.146,8.427-5.761,8.455
+		c-0.009,0-0.018,0.002-0.026,0c-0.01,0.001-0.018,0-0.026,0c-2.607-0.028-3.995-3.728-5.745-8.411
+		c-0.006-0.014-0.011-0.029-0.017-0.043c-0.802-2.146-2.111-5.656-2.979-6.424c-0.867,0.768-2.176,4.277-2.978,6.424
+		c-0.004,0.01-0.008,0.021-0.012,0.031c-1.757,4.701-3.148,8.412-5.767,8.425c-0.004,0-0.006-0.001-0.012,0
+		c-0.006-0.001-0.009,0-0.012,0c-2.622-0.013-4.014-3.738-5.775-8.453c-0.004-0.01-0.008-0.021-0.011-0.031
+		c-0.802-2.149-2.104-5.633-2.968-6.398c-0.867,0.768-2.178,4.277-2.98,6.423c0,0,0,0,0,0c-0.002,0.004-0.003,0.009-0.005,0.013
+		h0.001C4.071,21.382,2.864,24.6,1,25.596V41c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V18.637
+		C46.859,18.263,46.717,17.885,46.572,17.496z"/>
+</g>
+</svg>
diff --git a/react/src/svg/fx_instrument.svg b/react/src/svg/fx_instrument.svg
new file mode 100644
index 0000000..7627d61
--- /dev/null
+++ b/react/src/svg/fx_instrument.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="x">
+</g>
+<g id="Layer_1">
+	<g id="Layer_1_1_" display="none">
+		<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"
+			/>
+		<g display="inline">
+			<rect x="5" y="10.828" fill="#FFFFFF" width="4.673" height="21.398"/>
+			<rect x="10.404" y="10.828" fill="#FFFFFF" width="4.674" height="21.398"/>
+			<rect x="15.81" y="10.828" fill="#FFFFFF" width="4.673" height="21.398"/>
+			<rect x="21.215" y="10.828" fill="#FFFFFF" width="4.673" height="21.398"/>
+			<rect x="8.417" y="10.828" width="3.243" height="12.333"/>
+			<rect x="13.823" y="10.828" width="3.243" height="12.333"/>
+			<rect x="26.619" y="10.828" fill="#FFFFFF" width="4.673" height="21.398"/>
+			<rect x="19.227" y="10.828" width="3.244" height="12.333"/>
+			<rect x="32.023" y="10.828" fill="#FFFFFF" width="4.674" height="21.398"/>
+			<rect x="30.036" y="10.828" width="3.243" height="12.333"/>
+			<rect x="37.429" y="10.828" fill="#FFFFFF" width="4.673" height="21.398"/>
+			<rect x="35.441" y="10.828" width="3.243" height="12.333"/>
+		</g>
+	</g>
+	<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z M5,32.227V10.828
+		h3.417V23.5h1.256v8.727H5z M10.404,32.227V23.5h1.256V10.828h2.163V23.5h1.256v8.727H10.404z M15.81,32.227V23.5h1.256V10.828
+		h2.162V23.5h1.255v8.727H15.81z M25.888,32.227h-4.673V23.5h1.256V10.828h3.417V32.227z M26.619,32.227V10.828h3.417V23.5h1.256
+		v8.727H26.619z M32.023,32.227V23.5h1.256V10.828h2.162V23.5h1.256v8.727H32.023z M42.102,32.227h-4.673V23.5h1.256V10.828h3.417
+		V32.227z"/>
+</g>
+</svg>
diff --git a/react/src/svg/fx_limiter.svg b/react/src/svg/fx_limiter.svg
new file mode 100644
index 0000000..2c465c7
--- /dev/null
+++ b/react/src/svg/fx_limiter.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1_1_" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<polyline display="inline" fill="none" stroke="#FFFFFF" stroke-width="5" points="5.5,53.25 24,12.5 65.5,12.5 	"/>
+</g>
+<g>
+	<path d="M22.389,10H47V7c0-3.313-2.688-6-6-6H7C3.687,1,1,3.687,1,7v34c0,2.853,1.994,5.236,4.662,5.845L22.389,10z"/>
+	<path d="M25.61,15L11.083,47H41c3.313,0,6-2.688,6-6V15H25.61z"/>
+</g>
+<path d="M109,15"/>
+</svg>
diff --git a/react/src/svg/fx_lr.svg b/react/src/svg/fx_lr.svg
new file mode 100644
index 0000000..6f178d2
--- /dev/null
+++ b/react/src/svg/fx_lr.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1_1_" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<path display="inline" fill="none" stroke="#FFFFFF" stroke-width="6" d="M24,9.328c0,4.971-4.029,9-9,9H-0.605
+		c-4.971,0-9-4.029-9-9V-9.328c0-4.971,4.029-9,9-9H15c4.971,0,9,4.029,9,9V9.328z"/>
+	<path display="inline" fill="none" stroke="#FFFFFF" stroke-width="6" d="M24,57.328c0,4.971-4.029,9-9,9H-0.605
+		c-4.971,0-9-4.029-9-9V38.672c0-4.971,4.029-9,9-9H15c4.971,0,9,4.029,9,9V57.328z"/>
+</g>
+<g>
+	<path d="M41,1H28v8.328c0,6.617-5.383,12-12,12H1v5.344h15c6.617,0,12,5.383,12,12V47h13c3.313,0,6-2.688,6-6V7
+		C47,3.687,44.313,1,41,1z"/>
+	<path d="M16,32.672H1V41c0,3.313,2.687,6,6,6h15v-8.328C22,35.363,19.309,32.672,16,32.672z"/>
+	<path d="M22,9.328V1H7C3.687,1,1,3.687,1,7v8.328h15C19.309,15.328,22,12.636,22,9.328z"/>
+</g>
+</svg>
diff --git a/react/src/svg/fx_mixer.svg b/react/src/svg/fx_mixer.svg
new file mode 100644
index 0000000..891fd3b
--- /dev/null
+++ b/react/src/svg/fx_mixer.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="x">
+</g>
+<g id="Layer_1" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<g display="inline">
+		<line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" x1="11.5" y1="29" x2="11.5" y2="38.5"/>
+		<circle fill="#FFFFFF" cx="11.5" cy="13.5" r="2.5"/>
+		<circle fill="#FFFFFF" cx="11.5" cy="20.5" r="2.5"/>
+	</g>
+	<g display="inline">
+		<line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" x1="21.5" y1="29" x2="21.5" y2="38.5"/>
+		<circle fill="#FFFFFF" cx="21.5" cy="13.5" r="2.5"/>
+		<circle fill="#FFFFFF" cx="21.5" cy="20.5" r="2.5"/>
+	</g>
+	<g display="inline">
+		<line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-linecap="round" x1="31.5" y1="29" x2="31.5" y2="38.5"/>
+		<circle fill="#FFFFFF" cx="31.5" cy="13.5" r="2.5"/>
+		<circle fill="#FFFFFF" cx="31.5" cy="20.5" r="2.5"/>
+	</g>
+</g>
+<g id="Compound">
+	<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z M14,38.5
+		c0,1.381-1.119,2.5-2.5,2.5S9,39.881,9,38.5V29c0-1.381,1.119-2.5,2.5-2.5S14,27.619,14,29V38.5z M11.5,23
+		C10.119,23,9,21.88,9,20.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S12.881,23,11.5,23z M11.5,16C10.119,16,9,14.88,9,13.5
+		s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S12.881,16,11.5,16z M24,38.5c0,1.381-1.119,2.5-2.5,2.5S19,39.881,19,38.5V29
+		c0-1.381,1.119-2.5,2.5-2.5S24,27.619,24,29V38.5z M21.5,23c-1.381,0-2.5-1.12-2.5-2.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5
+		S22.881,23,21.5,23z M21.5,16c-1.381,0-2.5-1.12-2.5-2.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S22.881,16,21.5,16z M34,38.5
+		c0,1.381-1.119,2.5-2.5,2.5S29,39.881,29,38.5V29c0-1.381,1.119-2.5,2.5-2.5S34,27.619,34,29V38.5z M31.5,23
+		c-1.381,0-2.5-1.12-2.5-2.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S32.881,23,31.5,23z M31.5,16c-1.381,0-2.5-1.12-2.5-2.5
+		s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S32.881,16,31.5,16z"/>
+</g>
+</svg>
diff --git a/react/src/svg/fx_modulator.svg b/react/src/svg/fx_modulator.svg
new file mode 100644
index 0000000..f1bba64
--- /dev/null
+++ b/react/src/svg/fx_modulator.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<circle cx="24" cy="23.999" r="23"/>
+	<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<path id="full_sin_1_" display="inline" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" d="M-12.638,28.917
+		 M-12.64,28.914c1.498,5.253,2.994,10.507,4.7,10.507 M-3.248,28.914c-1.497,5.251-2.992,10.507-4.698,10.507 M-3.249,28.914
+		c1.497-5.253,2.994-10.507,4.699-10.507 M6.143,28.915c-1.495-5.254-2.991-10.508-4.697-10.508 M6.143,28.917
+		c1.498,5.254,2.994,10.507,4.696,10.507 M15.536,28.917c-1.498,5.254-2.994,10.507-4.699,10.507 M15.536,28.918
+		c1.495-5.254,2.99-10.507,4.697-10.507 M24.926,28.918c-1.497-5.254-2.993-10.507-4.698-10.507 M24.926,28.915
+		c1.496,5.253,2.99,10.508,4.697,10.508 M34.314,28.915c-1.495,5.253-2.99,10.508-4.697,10.508 M34.314,28.915
+		c1.499-5.252,2.994-10.505,4.698-10.505 M43.706,28.917c-1.495-5.254-2.992-10.507-4.696-10.507 M43.706,28.915
+		c1.496,5.253,2.992,10.508,4.701,10.508 M53.098,28.915c-1.496,5.253-2.99,10.508-4.697,10.508 M53.098,28.917
+		c1.498-5.254,2.991-10.507,4.698-10.507 M62.488,28.917C60.99,23.663,59.497,18.41,57.79,18.41 M62.488,28.914
+		c1.494,5.253,2.991,10.507,4.698,10.507 M71.879,28.914c-1.493,5.251-2.991,10.507-4.696,10.507 M71.879,28.914
+		c1.496-5.253,2.99-10.507,4.697-10.507 M81.272,28.915c-1.498-5.254-2.996-10.508-4.698-10.508 M81.272,28.917
+		c1.496,5.254,2.993,10.507,4.696,10.507 M90.663,28.917c-1.495,5.254-2.993,10.507-4.696,10.507 M90.663,28.918"/>
+	<path id="full_sin_2_" display="inline" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" d="M-3.998,19.851
+		 M-4,19.848c1.498,5.253,2.994,10.508,4.7,10.508 M5.392,19.848C3.896,25.1,2.4,30.355,0.694,30.355 M5.391,19.848
+		C6.888,14.595,8.385,9.341,10.09,9.341 M14.782,19.849c-1.495-5.254-2.991-10.508-4.697-10.508 M14.782,19.851
+		c1.498,5.254,2.994,10.507,4.696,10.507 M24.176,19.851c-1.498,5.254-2.994,10.507-4.699,10.507 M24.176,19.852
+		c1.494-5.254,2.99-10.507,4.695-10.507 M33.564,19.852c-1.496-5.254-2.992-10.507-4.697-10.507 M33.564,19.849
+		c1.498,5.252,2.992,10.506,4.699,10.506 M42.953,19.849c-1.494,5.252-2.99,10.506-4.697,10.506 M42.953,19.849
+		c1.5-5.253,2.996-10.506,4.699-10.506 M52.346,19.851C50.85,14.596,49.354,9.343,47.65,9.343 M52.346,19.849
+		c1.496,5.252,2.992,10.506,4.701,10.506 M61.736,19.849c-1.494,5.252-2.988,10.506-4.695,10.506 M61.736,19.851
+		c1.498-5.254,2.992-10.507,4.699-10.507 M71.129,19.851c-1.498-5.254-2.992-10.507-4.699-10.507 M71.129,19.848
+		c1.492,5.253,2.99,10.508,4.697,10.508 M80.52,19.848c-1.494,5.252-2.992,10.508-4.697,10.508 M80.52,19.848
+		c1.496-5.253,2.988-10.507,4.695-10.507 M89.912,19.849c-1.498-5.254-2.996-10.508-4.699-10.508 M89.912,19.851
+		c1.496,5.254,2.994,10.507,4.697,10.507 M99.303,19.851c-1.496,5.254-2.992,10.507-4.695,10.507 M99.303,19.852"/>
+</g>
+<g id="Composed">
+	<g>
+		<path d="M32.137,20.311c-0.006-0.016-0.011-0.032-0.015-0.048c-0.858-3.013-2.245-7.882-3.253-9.208
+			c-1.01,1.325-2.394,6.195-3.251,9.207c-0.003,0.012-0.006,0.023-0.01,0.035c-0.293,1.029-0.569,1.985-0.835,2.88
+			c0.492,1.501,1.004,3.257,1.581,5.28c0.005,0.016,0.01,0.031,0.014,0.047l0.007,0.023c0.855,3.005,2.239,7.861,3.245,9.185
+			c1.008-1.325,2.394-6.191,3.25-9.202l2.239,0.637c-0.006-0.01-0.011-0.021-0.017-0.031l-0.778-0.2l-1.432-0.449
+			c0.293-1.027,0.569-1.982,0.835-2.877C33.225,24.089,32.714,22.333,32.137,20.311z"/>
+		<path d="M36.87,25.533c0.485,1.389,0.97,2.558,1.39,3.11c0.64-0.841,1.43-3.104,2.141-5.415c-0.484-1.389-0.969-2.557-1.389-3.108
+			C38.373,20.96,37.582,23.225,36.87,25.533z"/>
+		<path d="M1.433,17c0.005,0,0.009,0,0.015,0c0.009,0,0.011,0,0.015,0c1.069,0,1.911,0.599,2.674,1.826
+			c2.052-7.168,3.316-10.967,5.936-10.984c0.004,0,0.007,0.004,0.015,0.001c0.007,0.003,0.01,0.003,0.015,0.002
+			c2.702,0.017,3.959,3.999,6.123,11.604c0.003,0.011,0.006,0.033,0.009,0.044c0.109,0.383,0.227,0.818,0.351,1.249
+			C17.616,18.25,18.683,17,20.213,17c0.006,0,0.011,0,0.017,0c0.007,0,0.012,0,0.017,0c1.069,0,1.911,0.68,2.673,1.909
+			C24.969,11.737,26.232,8,28.855,8c0.005,0,0.009,0,0.014,0s0.009,0,0.014,0c2.694,0,3.953,3.901,6.11,11.475
+			c0.005,0.015,0.01-0.042,0.014-0.026l0.012,0.051c0.108,0.381,0.226,0.814,0.35,1.243C36.401,18.247,37.469,17,39.001,17
+			c0.004,0,0.011,0,0.01,0c0.005,0,0.007,0,0.011,0c1.071,0,1.915,0.675,2.679,1.903c1.88-6.559,3.102-10.227,5.3-10.811V7
+			c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v10.046C1.142,17.022,1.283,17,1.433,17z"/>
+		<path d="M44.396,20.26c-0.296,1.041-0.574,2.006-0.842,2.91c0.493,1.504,1.006,3.266,1.584,5.296
+			c0.004,0.013,0.008,0.025,0.011,0.038l0.002,0.006c0.497,1.747,1.173,4.115,1.85,6.058V12.255
+			c-0.894,2.018-1.911,5.579-2.595,7.97C44.402,20.236,44.399,20.248,44.396,20.26z"/>
+		<path d="M1.448,20.117C1.306,20.305,1.155,20.571,1,20.885v7.27c0.576-1.054,1.235-2.969,1.838-4.927
+			C2.353,21.838,1.868,20.669,1.448,20.117z"/>
+		<path d="M4.602,19.619c0.003,0.007,0.007,0.014,0.011,0.021l0.778,0.208l-0.015-0.004l0.003,0.001L4.602,19.619z"/>
+		<path d="M18.089,25.536c0.485,1.391,0.97,2.56,1.389,3.111c0.639-0.84,1.43-3.103,2.142-5.414
+			c-0.485-1.391-0.971-2.56-1.391-3.112C19.59,20.961,18.8,23.225,18.089,25.536z"/>
+		<path d="M42.275,29.424c-0.004-0.014-0.009-0.047-0.012-0.061c-0.111-0.392-0.232-0.779-0.359-1.223
+			C40.876,30.627,39.812,32,38.286,32c-0.009,0-0.019,0-0.026,0c-0.011,0-0.019,0-0.026,0c-1.064,0-1.903-0.722-2.663-1.947
+			c-2.049,7.167-3.313,10.85-5.93,10.871c-0.007,0-0.013,0.003-0.021,0.001c-0.006,0.002-0.014,0.003-0.021,0.003
+			c-2.691-0.022-3.947-3.977-6.102-11.543c-0.005-0.016-0.01-0.022-0.014-0.038l-0.002,0.011c-0.111-0.391-0.231-0.776-0.359-1.217
+			C22.088,30.64,21.02,32,19.484,32c-0.002,0-0.004,0-0.006,0c-0.003,0-0.005,0-0.006,0c-1.073,0-1.917-0.674-2.681-1.905
+			C14.734,37.272,13.471,41,10.844,41c-0.001,0-0.003,0-0.005,0c-0.001,0-0.001,0-0.002,0c-0.002,0-0.004,0-0.005,0
+			c-2.703,0-3.96-4-6.128-11.605c-0.004-0.012-0.007-0.046-0.011-0.059c-0.109-0.385-0.228-0.763-0.352-1.195
+			C3.376,30.472,2.376,31.804,1,31.967V41c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6v-0.422
+			C45.185,39.368,44.025,35.57,42.275,29.424z"/>
+		<path d="M7.585,28.505c0.003,0.013,0.007,0.025,0.01,0.038c0.858,3.011,2.239,7.85,3.243,9.171
+			c1.006-1.323,2.392-6.183,3.249-9.188h0c0.001-0.006,0.003-0.012,0.005-0.018c0.296-1.042,0.575-2.009,0.843-2.914
+			c-0.496-1.511-1.012-3.28-1.593-5.321c-0.003-0.012-0.006-0.023-0.009-0.035c-0.857-3.015-2.239-7.865-3.246-9.187
+			c-1.008,1.325-2.395,6.19-3.252,9.2l-1.444-0.404l0.053,0.015l-0.041-0.012l1.424,0.431c-0.294,1.032-0.571,1.992-0.837,2.889
+			C6.487,24.686,7.003,26.459,7.585,28.505z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_oscillator.svg b/react/src/svg/fx_oscillator.svg
new file mode 100644
index 0000000..b034041
--- /dev/null
+++ b/react/src/svg/fx_oscillator.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1_1_" display="none">
+	<circle cx="24" cy="23.999" r="23"/>
+	<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<path id="full_sin_2_" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" d="M-4.64,16.94
+		c1.398,3.74,2.795,7.481,4.388,7.481 M4.129,16.94c-1.397,3.739-2.793,7.481-4.386,7.481 M4.128,16.94
+		c1.397-3.74,2.795-7.481,4.387-7.481 M12.896,16.941C11.5,13.2,10.104,9.459,8.511,9.459 M12.896,16.942
+		c1.398,3.741,2.795,7.481,4.385,7.481 M21.665,16.942c-1.398,3.741-2.795,7.481-4.387,7.481 M21.665,16.943
+		c1.396-3.741,2.792-7.481,4.385-7.481 M30.432,16.943c-1.396-3.741-2.793-7.481-4.386-7.481 M30.432,16.941
+		c1.397,3.74,2.793,7.481,4.387,7.481 M39.197,16.941c-1.396,3.74-2.793,7.481-4.387,7.481 M39.197,16.941
+		c1.398-3.74,2.796-7.48,4.387-7.48 M47.966,16.942c-1.396-3.741-2.794-7.481-4.385-7.481 M47.966,16.941
+		c1.396,3.74,2.793,7.481,4.39,7.481 M56.732,16.941c-1.396,3.74-2.791,7.481-4.385,7.481 M56.732,16.942
+		c1.398-3.741,2.793-7.481,4.388-7.481 M65.501,16.942c-1.397-3.741-2.793-7.481-4.388-7.481 M65.501,16.94
+		c1.396,3.74,2.793,7.481,4.388,7.481 M74.27,16.94c-1.396,3.739-2.793,7.481-4.386,7.481 M74.27,16.94
+		c1.396-3.74,2.791-7.481,4.385-7.481 M83.038,16.941c-1.397-3.741-2.797-7.482-4.388-7.482 M83.038,16.942
+		c1.396,3.741,2.795,7.481,4.385,7.481 M91.807,16.942c-1.396,3.741-2.795,7.481-4.386,7.481"/>
+	<polyline id="Saw" display="inline" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" points="-6.75,27.423 
+		8.747,12.459 8.747,27.402 23.467,12.462 23.467,27.423 38.316,12.459 38.316,27 54.096,12.459 53.385,27.423 69.167,12.459 	"/>
+</g>
+<g>
+	<path d="M10.247,8.925v14.817l14.72-14.94v14.979l14.85-14.964v14.76L47,16.958V7c0-3.313-2.688-6-6-6H7C3.687,1,1,3.687,1,7
+		v10.854L10.247,8.925z"/>
+	<path d="M36.816,30.422V16.1L21.967,31.064V16.122L7.247,31.062V15.993L1,22.024V41c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6
+		V21.038L36.816,30.422z"/>
+</g>
+</svg>
diff --git a/react/src/svg/fx_parametric_eq.svg b/react/src/svg/fx_parametric_eq.svg
new file mode 100755
index 0000000..c1a0305
--- /dev/null
+++ b/react/src/svg/fx_parametric_eq.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="x">
+</g>
+<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z M19.996,38.5
+	c0,1.381-1.119,2.5-2.5,2.5s-2.5-1.119-2.5-2.5V8.984c0-1.381,1.119-2.5,2.5-2.5s2.5,1.119,2.5,2.5V38.5z M17.496,28.019
+	c-1.381,0-2.5-1.12-2.5-2.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S18.877,28.019,17.496,28.019z M29.996,38.5
+	c0,1.381-1.119,2.5-2.5,2.5s-2.5-1.119-2.5-2.5V8.984c0-1.381,1.119-2.5,2.5-2.5s2.5,1.119,2.5,2.5V38.5z M37.504,31.021
+	c-1.381,0-2.5-1.12-2.5-2.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S38.885,31.021,37.504,31.021z M40.004,38.5
+	c0,1.381-1.119,2.5-2.5,2.5s-2.5-1.119-2.5-2.5V8.984c0-1.381,1.119-2.5,2.5-2.5s2.5,1.119,2.5,2.5V38.5z M27.496,23.016
+	c-1.381,0-2.5-1.12-2.5-2.5s1.119-2.5,2.5-2.5s2.5,1.12,2.5,2.5S28.877,23.016,27.496,23.016z"/>
+</svg>
diff --git a/react/src/svg/fx_phaser.svg b/react/src/svg/fx_phaser.svg
new file mode 100644
index 0000000..2653f16
--- /dev/null
+++ b/react/src/svg/fx_phaser.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Combined">
+	<g>
+		<path d="M28.602,32.402c1.899-0.775,2.621-2.884,2.882-4.072c0.517-2.352,0.188-5.232-0.903-7.903
+			c-0.302-0.739-0.646-1.417-1.017-2.049l-5.817,13.155c1.183,0.759,2.367,1.15,3.388,1.15
+			C27.652,32.684,28.146,32.589,28.602,32.402z"/>
+		<path d="M20.783,13.264c-1.898,0.775-2.62,2.884-2.881,4.071c-0.517,2.352-0.188,5.232,0.903,7.902
+			c0.354,0.866,0.763,1.655,1.208,2.373l5.883-13.304c-1.268-0.873-2.551-1.323-3.647-1.323
+			C21.733,12.983,21.24,13.077,20.783,13.264z"/>
+		<path d="M35.807,4.261l-3.896,8.812c1.318,1.549,2.452,3.392,3.299,5.464c1.486,3.64,1.898,7.499,1.158,10.867
+			c-0.803,3.65-2.943,6.431-5.875,7.628c-1.059,0.433-2.188,0.652-3.357,0.652c-1.847,0-3.696-0.549-5.431-1.532l-4.363,9.866
+			C19.45,46.654,21.684,47,24,47c12.703,0,23-10.297,23-23.001C47,15.613,42.511,8.279,35.807,4.261z"/>
+		<path d="M17.699,32.847c-1.414-1.601-2.628-3.531-3.522-5.719c-1.486-3.639-1.898-7.498-1.158-10.866
+			c0.802-3.65,2.942-6.43,5.874-7.627c1.059-0.433,2.189-0.652,3.358-0.652c1.942,0,3.889,0.598,5.701,1.68l3.311-7.486
+			C28.979,1.417,26.538,1,24,1C11.297,1,1,11.296,1,23.999c0,8.612,4.736,16.114,11.742,20.056L17.699,32.847z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_pitch.svg b/react/src/svg/fx_pitch.svg
new file mode 100644
index 0000000..88b9517
--- /dev/null
+++ b/react/src/svg/fx_pitch.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="x">
+</g>
+<g id="Layer_1" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<line display="inline" stroke="#FFFFFF" stroke-width="4" x1="-2.085" y1="35.585" x2="51.918" y2="35.585"/>
+	<g display="inline">
+		<line x1="-3.085" y1="17.585" x2="50.918" y2="17.585"/>
+		<g>
+			<line fill="none" stroke="#FFFFFF" stroke-width="4" x1="-3.085" y1="17.585" x2="-0.585" y2="17.585"/>
+			
+				<line fill="none" stroke="#FFFFFF" stroke-width="4" stroke-dasharray="5.0003,4.0003" x1="3.415" y1="17.585" x2="46.418" y2="17.585"/>
+			<line fill="none" stroke="#FFFFFF" stroke-width="4" x1="48.418" y1="17.585" x2="50.918" y2="17.585"/>
+		</g>
+	</g>
+</g>
+<g id="Compound">
+	<g>
+		<path d="M47,33.585V7c0-3.313-2.688-6-6-6H7C3.687,1,1,3.687,1,7v26.585H47z M39.418,15.585h5v4h-5V15.585z M30.417,15.585h5v4h-5
+			V15.585z M21.417,15.585h5v4h-5V15.585z M12.416,15.585h5v4h-5V15.585z M3.415,15.585h5v4h-5V15.585z"/>
+		<path d="M1,37.585V41c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6v-3.415H1z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_plugin.svg b/react/src/svg/fx_plugin.svg
new file mode 100644
index 0000000..dc524a1
--- /dev/null
+++ b/react/src/svg/fx_plugin.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<line display="inline" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" x1="1" y1="25" x2="25" y2="25"/>
+	<circle display="inline" fill="#FFFFFF" cx="24" cy="25" r="4.667"/>
+	<line display="inline" fill="none" stroke="#FFFFFF" stroke-width="4" x1="34" y1="25" x2="48" y2="25"/>
+	<path display="inline" fill="#FFFFFF" d="M24,13c-4.43,0-8.297,2.419-10.376,6h5.103c1.41-1.241,3.253-2,5.274-2
+		c4.411,0,8,3.589,8,8s-3.589,8-8,8c-2.021,0-3.864-0.76-5.274-2h-5.103c2.079,3.581,5.946,6,10.376,6c6.617,0,12-5.383,12-12
+		C36,18.383,30.617,13,24,13z"/>
+</g>
+<g id="Combined">
+	<path d="M35.819,27C34.863,32.666,29.935,37,24,37c-4.43,0-8.298-2.419-10.376-6h5.103c1.41,1.24,3.253,2,5.274,2
+		c4.411,0,8-3.589,8-8s-3.589-8-8-8c-2.021,0-3.864,0.759-5.274,2h-5.103c2.079-3.581,5.947-6,10.376-6
+		c5.935,0,10.862,4.334,11.819,10H47V7c0-3.313-2.687-6-6-6H7C3.687,1,1,3.687,1,7v16h18.799c0.75-1.572,2.342-2.667,4.201-2.667
+		c2.577,0,4.667,2.089,4.667,4.667c0,2.577-2.09,4.667-4.667,4.667c-1.858,0-3.45-1.095-4.201-2.667H1v14c0,3.313,2.687,6,6,6h34
+		c3.313,0,6-2.687,6-6V27H35.819z"/>
+</g>
+</svg>
diff --git a/react/src/svg/fx_reverb.svg b/react/src/svg/fx_reverb.svg
new file mode 100644
index 0000000..55f836f
--- /dev/null
+++ b/react/src/svg/fx_reverb.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<circle cx="24" cy="23.999" r="23"/>
+	<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<g display="inline">
+		<circle fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" cx="9.938" cy="59.874" r="10.865"/>
+		<circle fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" cx="9.938" cy="59.874" r="25.055"/>
+		<circle fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" cx="9.938" cy="59.874" r="37.472"/>
+		<circle fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" cx="9.938" cy="60.761" r="52.327"/>
+	</g>
+	<g display="inline">
+		<circle fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" cx="50.938" cy="46.874" r="10.865"/>
+		<circle fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" cx="50.938" cy="46.874" r="25.055"/>
+		<circle fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" cx="50.938" cy="46.874" r="37.472"/>
+		<circle fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" cx="50.938" cy="47.761" r="52.327"/>
+	</g>
+</g>
+<g id="Composed">
+	<g>
+		<path d="M43.872,40.746c0.706,1.248,1.34,2.542,1.908,3.869C46.542,43.609,47,42.359,47,41v-2.618
+			C45.798,38.944,44.733,39.755,43.872,40.746z"/>
+		<path d="M34.719,29.817c2.885,2.382,5.421,5.171,7.522,8.277c1.326-1.313,2.952-2.32,4.759-2.931V26.06
+			c-0.636-0.679-1.277-1.352-1.949-1.995C41.114,25.081,37.578,27.097,34.719,29.817z"/>
+		<path d="M28.225,40.646c1.944,1.851,3.607,3.993,4.924,6.354h5.429c-0.001-0.042-0.005-0.084-0.005-0.126
+			c0-2.287,0.635-4.423,1.722-6.263c-2.072-3.253-4.646-6.156-7.622-8.59C30.634,34.523,29.102,37.45,28.225,40.646z"/>
+		<path d="M9.938,36.319c-3.144,0-6.144,0.624-8.889,1.747C1.03,38.161,1.018,38.259,1,38.354V41c0,3.313,2.687,6,6,6h4.969
+			c0-0.042-0.003-0.084-0.003-0.126c0-3.566,0.491-7.019,1.393-10.304C12.241,36.407,11.1,36.319,9.938,36.319z"/>
+		<path d="M24.383,46.874c0-1.773,0.178-3.506,0.512-5.184c-2.49-2.051-5.409-3.596-8.596-4.491
+			c-0.862,3.08-1.333,6.323-1.333,9.675c0,0.042,0.003,0.084,0.003,0.126h9.417C24.386,46.958,24.383,46.916,24.383,46.874z"/>
+		<path d="M45.951,20.795c0.347-0.066,0.697-0.123,1.049-0.175v-9.5c-3.709,0.408-7.249,1.382-10.535,2.832
+			C39.874,15.893,43.058,18.185,45.951,20.795z"/>
+		<path d="M42.103,43.797c-0.338,0.966-0.53,1.998-0.53,3.077c0,0.033,0.006,0.064,0.006,0.097c0.615-0.059,1.203-0.209,1.749-0.439
+			C42.954,45.602,42.55,44.688,42.103,43.797z"/>
+		<path d="M27.534,44.238c-0.097,0.866-0.151,1.744-0.151,2.636c0,0.042,0.006,0.084,0.006,0.126h2.236
+			C28.989,46.032,28.301,45.101,27.534,44.238z"/>
+		<path d="M33.163,12.209C37.389,10.034,42.061,8.618,47,8.116V7c0-3.313-2.687-6-6-6h-9.932c-4.141,1.77-8.006,4.064-11.5,6.813
+			C24.346,8.681,28.911,10.167,33.163,12.209z"/>
+		<path d="M7.774,20.965c0.716-0.04,1.437-0.063,2.163-0.063c3.709,0,7.295,0.532,10.696,1.504c2.637-3.26,5.789-6.083,9.331-8.354
+			c-4.212-1.813-8.716-3.062-13.419-3.675C13.167,13.487,10.214,17.05,7.774,20.965z"/>
+		<path d="M1,10.736v11.208c1.008-0.237,2.029-0.442,3.065-0.6c2.35-4.152,5.228-7.965,8.554-11.339
+			c-0.888-0.046-1.782-0.072-2.682-0.072C6.887,9.934,3.904,10.219,1,10.736z"/>
+		<path d="M9.938,6.934c1.904,0,3.785,0.103,5.639,0.297c2.699-2.358,5.641-4.441,8.771-6.23H7C3.687,1,1,3.687,1,7v0.689
+			C3.909,7.201,6.892,6.934,9.938,6.934z"/>
+		<path d="M5.96,24.127c-1.736,3.29-3.122,6.79-4.107,10.455c2.551-0.817,5.266-1.263,8.084-1.263c1.476,0,2.921,0.127,4.333,0.359
+			c1.118-3.097,2.616-6.013,4.439-8.69c-2.809-0.707-5.747-1.086-8.772-1.086C8.593,23.902,7.267,23.982,5.96,24.127z"/>
+		<path d="M1,27.711c0.406-1.01,0.834-2.007,1.299-2.985C1.863,24.821,1.431,24.927,1,25.038V27.711z"/>
+		<path d="M17.221,34.344c3.104,0.887,5.979,2.319,8.508,4.197c1.013-3.056,2.563-5.866,4.544-8.318
+			c-2.617-1.8-5.482-3.259-8.533-4.322C19.881,28.482,18.351,31.314,17.221,34.344z"/>
+		<path d="M23.699,23.419c3.07,1.163,5.954,2.704,8.599,4.564c2.834-2.797,6.292-4.958,10.145-6.262
+			c-2.834-2.364-5.933-4.417-9.237-6.126C29.603,17.646,26.389,20.299,23.699,23.419z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_simulator.svg b/react/src/svg/fx_simulator.svg
new file mode 100644
index 0000000..981bda0
--- /dev/null
+++ b/react/src/svg/fx_simulator.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve" >
+<g id="Combined">
+	<g>
+		<path d="M32.013,28.062c-1.345,0-2.257,1.704-2.232,5.328c-0.024,3.577,0.84,5.28,2.256,5.28s2.185-1.775,2.185-5.328
+			C34.221,29.886,33.477,28.062,32.013,28.062z"/>
+		<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6V7C47,3.687,44.313,1,41,1z M31.009,7H34v15
+			h-3V10h-0.544l-2.976,1.428L26.88,8.703L31.009,7z M18,41h-4V29h-0.044l-2.976,1.428l-0.601-2.725L14.509,26H18V41z M15.44,22.431
+			c-4.032,0-5.809-3.625-5.833-8.041c0-4.512,1.921-8.088,5.953-8.088c4.176,0,5.809,3.72,5.809,7.993
+			C21.369,19.118,19.425,22.431,15.44,22.431z M31.94,41.431c-4.032,0-5.809-3.624-5.833-8.041c0-4.513,1.921-8.089,5.953-8.089
+			c4.176,0,5.809,3.721,5.809,7.993C37.869,38.118,35.925,41.431,31.94,41.431z"/>
+		<path d="M15.513,9.062c-1.345,0-2.257,1.704-2.232,5.328c-0.024,3.577,0.84,5.281,2.256,5.281s2.185-1.776,2.185-5.329
+			C17.721,10.886,16.977,9.062,15.513,9.062z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_spatial.svg b/react/src/svg/fx_spatial.svg
new file mode 100644
index 0000000..ae27920
--- /dev/null
+++ b/react/src/svg/fx_spatial.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="x">
+</g>
+<g id="Layer_1" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<g display="inline">
+		<line x1="24" y1="24" x2="31.413" y2="11.541"/>
+		<g>
+			<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" x1="24" y1="24" x2="28.11" y2="17.091"/>
+			<g>
+				<polygon fill="#FFFFFF" points="31.296,20.515 31.413,11.541 23.583,15.925 				"/>
+			</g>
+		</g>
+	</g>
+	<circle display="inline" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" cx="24" cy="24" r="15.928"/>
+</g>
+<g id="Compound">
+	<g>
+		<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z M24,40.928
+			c-9.334,0-16.928-7.594-16.928-16.928S14.666,7.072,24,7.072S40.928,14.666,40.928,24S33.334,40.928,24,40.928z"/>
+		<path d="M24,9.072C15.769,9.072,9.072,15.769,9.072,24c0,8.231,6.697,14.928,14.928,14.928c8.231,0,14.928-6.696,14.928-14.928
+			C38.928,15.769,32.231,9.072,24,9.072z M31.296,20.515l-2.568-1.528l-4.205,7.069l-2.579-1.533l4.206-7.07l-2.567-1.527
+			l7.831-4.384L31.296,20.515z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_spectral.svg b/react/src/svg/fx_spectral.svg
new file mode 100644
index 0000000..dadd1a1
--- /dev/null
+++ b/react/src/svg/fx_spectral.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="x">
+</g>
+<g id="Layer_1">
+	<path d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" x1="10.167" y1="32.584" x2="38.584" y2="32.584"/>
+	<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" x1="12.5" y1="32.584" x2="12.5" y2="12"/>
+	<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" x1="20.5" y1="32.584" x2="20.5" y2="19"/>
+	<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" x1="28.5" y1="32.584" x2="28.5" y2="15"/>
+	<line fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" x1="36.5" y1="32.584" x2="36.5" y2="23"/>
+</g>
+<g id="Compound" display="none">
+	<g display="inline">
+		<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z M24,40.928
+			c-9.334,0-16.928-7.594-16.928-16.928S14.666,7.072,24,7.072S40.928,14.666,40.928,24S33.334,40.928,24,40.928z"/>
+		<path d="M24,9.072C15.769,9.072,9.072,15.769,9.072,24c0,8.231,6.697,14.928,14.928,14.928c8.231,0,14.928-6.696,14.928-14.928
+			C38.928,15.769,32.231,9.072,24,9.072z M31.296,20.515l-2.568-1.528l-4.205,7.069l-2.579-1.533l4.206-7.07l-2.567-1.527
+			l7.831-4.384L31.296,20.515z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_split_a.svg b/react/src/svg/fx_split_a.svg
new file mode 100644
index 0000000..8dc208c
--- /dev/null
+++ b/react/src/svg/fx_split_a.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<path display="inline" fill="#004000" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34
+		c3.313,0,6,2.687,6,6V41z"/>
+	<text transform="matrix(1 0 0 1 11.7305 36.5205)" display="inline" fill="#FFFFFF" font-family="'Roboto-Black'" font-size="36">A</text>
+</g>
+<g id="Composed">
+	<g>
+		<polygon fill="#004000" points="21.223,26.976 26.725,26.976 23.965,18.099 		"/>
+		<path fill="#004000" d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z
+			 M29.695,36.521l-1.494-4.781h-8.455l-1.477,4.781h-6.592l9.387-25.594h5.801l9.457,25.594H29.695z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_split_b.svg b/react/src/svg/fx_split_b.svg
new file mode 100644
index 0000000..ddebee8
--- /dev/null
+++ b/react/src/svg/fx_split_b.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<path display="inline" fill="#8A0000" d="M47,41c0,3.313-2.688,6-6,6H7c-3.313,0-6-2.688-6-6V7c0-3.313,2.687-6,6-6h34
+		c3.313,0,6,2.687,6,6V41z"/>
+	<text transform="matrix(1 0 0 1 12.3809 36.5205)" display="inline" fill="#FFFFFF" font-family="'Roboto-Black'" font-size="36">B</text>
+</g>
+<g id="Composed">
+	<g>
+		<path fill="#8A0000" d="M24.809,25.64h-4.324v6.135h4.043c1.113,0,1.969-0.255,2.566-0.765s0.896-1.228,0.896-2.153
+			C27.99,26.724,26.93,25.651,24.809,25.64z"/>
+		<path fill="#8A0000" d="M26.584,20.856c0.574-0.482,0.861-1.193,0.861-2.133c0-1.082-0.311-1.86-0.932-2.336
+			c-0.621-0.476-1.623-0.714-3.006-0.714h-3.023v5.924h3.217C25.049,21.585,26.01,21.338,26.584,20.856z"/>
+		<path fill="#8A0000" d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.688,6-6V7C47,3.687,44.313,1,41,1z
+			 M31.761,34.596c-1.588,1.26-3.94,1.901-7.058,1.925H14.314V10.927h9.193c3.293,0,5.798,0.604,7.515,1.811
+			s2.575,2.959,2.575,5.256c0,1.324-0.305,2.455-0.914,3.393s-1.506,1.629-2.689,2.074c1.336,0.352,2.361,1.008,3.076,1.969
+			s1.072,2.133,1.072,3.516C34.143,31.452,33.349,33.336,31.761,34.596z"/>
+	</g>
+</g>
+</svg>
diff --git a/react/src/svg/fx_terminal.svg b/react/src/svg/fx_terminal.svg
new file mode 100644
index 0000000..b2f746a
--- /dev/null
+++ b/react/src/svg/fx_terminal.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<circle cx="24" cy="24" r="14"/>
+<path display="none" fill="none" stroke="#000000" stroke-width="3" d="M45.5,39.392c0,3.098-2.011,6.108-5.108,6.108H8.609
+	c-3.098,0-6.109-3.011-6.109-6.108V7.609C2.5,4.511,5.511,2.5,8.609,2.5h31.783c3.098,0,5.108,2.011,5.108,5.109V39.392z"/>
+</svg>
diff --git a/react/src/svg/fx_utility.svg b/react/src/svg/fx_utility.svg
new file mode 100644
index 0000000..f7b40b8
--- /dev/null
+++ b/react/src/svg/fx_utility.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px"
+	 height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
+<g id="Layer_1" display="none">
+	<path display="inline" d="M47,41c0,3.313-2.687,6-6,6H7c-3.313,0-6-2.687-6-6V7c0-3.313,2.687-6,6-6h34c3.313,0,6,2.687,6,6V41z"/>
+	<path display="inline" fill="#FFFFFF" d="M37.636,33.571L25.244,21.105c1.226-3.152,0.545-6.849-2.042-9.453
+		c-2.723-2.739-6.808-3.288-10.075-1.78l5.855,5.89l-4.085,4.11l-5.992-5.891c-1.633,3.287-0.952,7.397,1.771,10.136
+		c2.586,2.603,6.263,3.289,9.394,2.055L32.461,38.64c0.545,0.547,1.362,0.547,1.906,0l3.131-3.15
+		C38.18,34.94,38.18,33.981,37.636,33.571z"/>
+</g>
+<g id="Combined">
+	<path d="M41,1H7C3.687,1,1,3.687,1,7v34c0,3.313,2.687,6,6,6h34c3.313,0,6-2.687,6-6V7C47,3.687,44.313,1,41,1z M37.498,35.489
+		l-3.131,3.15c-0.544,0.547-1.361,0.547-1.906,0L20.07,26.173c-3.131,1.233-6.808,0.548-9.394-2.055
+		c-2.723-2.739-3.404-6.849-1.771-10.136l5.992,5.891l4.085-4.11l-5.855-5.89c3.267-1.507,7.352-0.959,10.075,1.78
+		c2.587,2.604,3.268,6.301,2.042,9.453l12.392,12.466C38.18,33.981,38.18,34.94,37.498,35.489z"/>
+</g>
+</svg>