diff --git a/.gitignore b/.gitignore
index 943cf862ca8..c80c2866df0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -123,9 +123,6 @@ test/unit/**.log
 # Jars
 tool-data/shared/jars/
 
-# CSS build artifacts.
-sprite-*.scss
-
 # JS, Local node_modules, and bower_components directories
 static/maps
 static/plugins
@@ -150,4 +147,4 @@ doc/source/dev/schema.rst
 *.rej
 *~
 .idea
-.vscode
\ No newline at end of file
+.vscode
diff --git a/client/galaxy/style/scss/sprite-fugue.scss b/client/galaxy/style/scss/sprite-fugue.scss
new file mode 100644
index 00000000000..d850f10542b
--- /dev/null
+++ b/client/galaxy/style/scss/sprite-fugue.scss
@@ -0,0 +1,807 @@
+/*
+SCSS variables are information about icon's compiled state, stored under its original file name
+
+.icon-home {
+  width: $icon-home-width;
+}
+
+The large array-like variables contain all information about a single icon
+$icon-home: x y offset_x offset_y width height total_width total_height image_path;
+
+At the bottom of this section, we provide information about the spritesheet itself
+$spritesheet: width height image $spritesheet-sprites;
+*/
+$application-dock-270-bw-name: 'application-dock-270-bw';
+$application-dock-270-bw-x: 16px;
+$application-dock-270-bw-y: 0px;
+$application-dock-270-bw-offset-x: -16px;
+$application-dock-270-bw-offset-y: 0px;
+$application-dock-270-bw-width: 16px;
+$application-dock-270-bw-height: 16px;
+$application-dock-270-bw-total-width: 144px;
+$application-dock-270-bw-total-height: 128px;
+$application-dock-270-bw-image: 'sprite-fugue.png';
+$application-dock-270-bw: (16px, 0px, -16px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'application-dock-270-bw', );
+$application-dock-270-name: 'application-dock-270';
+$application-dock-270-x: 48px;
+$application-dock-270-y: 80px;
+$application-dock-270-offset-x: -48px;
+$application-dock-270-offset-y: -80px;
+$application-dock-270-width: 16px;
+$application-dock-270-height: 16px;
+$application-dock-270-total-width: 144px;
+$application-dock-270-total-height: 128px;
+$application-dock-270-image: 'sprite-fugue.png';
+$application-dock-270: (48px, 80px, -48px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'application-dock-270', );
+$arrow-000-small-bw-name: 'arrow-000-small-bw';
+$arrow-000-small-bw-x: 0px;
+$arrow-000-small-bw-y: 16px;
+$arrow-000-small-bw-offset-x: 0px;
+$arrow-000-small-bw-offset-y: -16px;
+$arrow-000-small-bw-width: 16px;
+$arrow-000-small-bw-height: 16px;
+$arrow-000-small-bw-total-width: 144px;
+$arrow-000-small-bw-total-height: 128px;
+$arrow-000-small-bw-image: 'sprite-fugue.png';
+$arrow-000-small-bw: (0px, 16px, 0px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-000-small-bw', );
+$arrow-090-name: 'arrow-090';
+$arrow-090-x: 16px;
+$arrow-090-y: 16px;
+$arrow-090-offset-x: -16px;
+$arrow-090-offset-y: -16px;
+$arrow-090-width: 16px;
+$arrow-090-height: 16px;
+$arrow-090-total-width: 144px;
+$arrow-090-total-height: 128px;
+$arrow-090-image: 'sprite-fugue.png';
+$arrow-090: (16px, 16px, -16px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-090', );
+$arrow-circle-name: 'arrow-circle';
+$arrow-circle-x: 32px;
+$arrow-circle-y: 0px;
+$arrow-circle-offset-x: -32px;
+$arrow-circle-offset-y: 0px;
+$arrow-circle-width: 16px;
+$arrow-circle-height: 16px;
+$arrow-circle-total-width: 144px;
+$arrow-circle-total-height: 128px;
+$arrow-circle-image: 'sprite-fugue.png';
+$arrow-circle: (32px, 0px, -32px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-circle', );
+$arrow-resize-090-bw-name: 'arrow-resize-090-bw';
+$arrow-resize-090-bw-x: 32px;
+$arrow-resize-090-bw-y: 16px;
+$arrow-resize-090-bw-offset-x: -32px;
+$arrow-resize-090-bw-offset-y: -16px;
+$arrow-resize-090-bw-width: 16px;
+$arrow-resize-090-bw-height: 16px;
+$arrow-resize-090-bw-total-width: 144px;
+$arrow-resize-090-bw-total-height: 128px;
+$arrow-resize-090-bw-image: 'sprite-fugue.png';
+$arrow-resize-090-bw: (32px, 16px, -32px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-resize-090-bw', );
+$arrow-resize-090-name: 'arrow-resize-090';
+$arrow-resize-090-x: 0px;
+$arrow-resize-090-y: 32px;
+$arrow-resize-090-offset-x: 0px;
+$arrow-resize-090-offset-y: -32px;
+$arrow-resize-090-width: 16px;
+$arrow-resize-090-height: 16px;
+$arrow-resize-090-total-width: 144px;
+$arrow-resize-090-total-height: 128px;
+$arrow-resize-090-image: 'sprite-fugue.png';
+$arrow-resize-090: (0px, 32px, 0px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-resize-090', );
+$arrow-split-bw-name: 'arrow-split-bw';
+$arrow-split-bw-x: 16px;
+$arrow-split-bw-y: 32px;
+$arrow-split-bw-offset-x: -16px;
+$arrow-split-bw-offset-y: -32px;
+$arrow-split-bw-width: 16px;
+$arrow-split-bw-height: 16px;
+$arrow-split-bw-total-width: 144px;
+$arrow-split-bw-total-height: 128px;
+$arrow-split-bw-image: 'sprite-fugue.png';
+$arrow-split-bw: (16px, 32px, -16px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-split-bw', );
+$arrow-split-name: 'arrow-split';
+$arrow-split-x: 32px;
+$arrow-split-y: 32px;
+$arrow-split-offset-x: -32px;
+$arrow-split-offset-y: -32px;
+$arrow-split-width: 16px;
+$arrow-split-height: 16px;
+$arrow-split-total-width: 144px;
+$arrow-split-total-height: 128px;
+$arrow-split-image: 'sprite-fugue.png';
+$arrow-split: (32px, 32px, -32px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-split', );
+$arrow-transition-270-bw-name: 'arrow-transition-270-bw';
+$arrow-transition-270-bw-x: 48px;
+$arrow-transition-270-bw-y: 0px;
+$arrow-transition-270-bw-offset-x: -48px;
+$arrow-transition-270-bw-offset-y: 0px;
+$arrow-transition-270-bw-width: 16px;
+$arrow-transition-270-bw-height: 16px;
+$arrow-transition-270-bw-total-width: 144px;
+$arrow-transition-270-bw-total-height: 128px;
+$arrow-transition-270-bw-image: 'sprite-fugue.png';
+$arrow-transition-270-bw: (48px, 0px, -48px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-transition-270-bw', );
+$arrow-transition-bw-name: 'arrow-transition-bw';
+$arrow-transition-bw-x: 48px;
+$arrow-transition-bw-y: 16px;
+$arrow-transition-bw-offset-x: -48px;
+$arrow-transition-bw-offset-y: -16px;
+$arrow-transition-bw-width: 16px;
+$arrow-transition-bw-height: 16px;
+$arrow-transition-bw-total-width: 144px;
+$arrow-transition-bw-total-height: 128px;
+$arrow-transition-bw-image: 'sprite-fugue.png';
+$arrow-transition-bw: (48px, 16px, -48px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-transition-bw', );
+$asterisk-small-outline-name: 'asterisk-small-outline';
+$asterisk-small-outline-x: 48px;
+$asterisk-small-outline-y: 32px;
+$asterisk-small-outline-offset-x: -48px;
+$asterisk-small-outline-offset-y: -32px;
+$asterisk-small-outline-width: 16px;
+$asterisk-small-outline-height: 16px;
+$asterisk-small-outline-total-width: 144px;
+$asterisk-small-outline-total-height: 128px;
+$asterisk-small-outline-image: 'sprite-fugue.png';
+$asterisk-small-outline: (48px, 32px, -48px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'asterisk-small-outline', );
+$asterisk-small-yellow-name: 'asterisk-small-yellow';
+$asterisk-small-yellow-x: 0px;
+$asterisk-small-yellow-y: 48px;
+$asterisk-small-yellow-offset-x: 0px;
+$asterisk-small-yellow-offset-y: -48px;
+$asterisk-small-yellow-width: 16px;
+$asterisk-small-yellow-height: 16px;
+$asterisk-small-yellow-total-width: 144px;
+$asterisk-small-yellow-total-height: 128px;
+$asterisk-small-yellow-image: 'sprite-fugue.png';
+$asterisk-small-yellow: (0px, 48px, 0px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'asterisk-small-yellow', );
+$asterisk-small-name: 'asterisk-small';
+$asterisk-small-x: 16px;
+$asterisk-small-y: 48px;
+$asterisk-small-offset-x: -16px;
+$asterisk-small-offset-y: -48px;
+$asterisk-small-width: 16px;
+$asterisk-small-height: 16px;
+$asterisk-small-total-width: 144px;
+$asterisk-small-total-height: 128px;
+$asterisk-small-image: 'sprite-fugue.png';
+$asterisk-small: (16px, 48px, -16px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'asterisk-small', );
+$block-plus-bw-name: 'block--plus-bw';
+$block-plus-bw-x: 32px;
+$block-plus-bw-y: 48px;
+$block-plus-bw-offset-x: -32px;
+$block-plus-bw-offset-y: -48px;
+$block-plus-bw-width: 16px;
+$block-plus-bw-height: 16px;
+$block-plus-bw-total-width: 144px;
+$block-plus-bw-total-height: 128px;
+$block-plus-bw-image: 'sprite-fugue.png';
+$block-plus-bw: (32px, 48px, -32px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'block--plus-bw', );
+$block-plus-name: 'block--plus';
+$block-plus-x: 48px;
+$block-plus-y: 48px;
+$block-plus-offset-x: -48px;
+$block-plus-offset-y: -48px;
+$block-plus-width: 16px;
+$block-plus-height: 16px;
+$block-plus-total-width: 144px;
+$block-plus-total-height: 128px;
+$block-plus-image: 'sprite-fugue.png';
+$block-plus: (48px, 48px, -48px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'block--plus', );
+$bookmarks-bw-name: 'bookmarks-bw';
+$bookmarks-bw-x: 64px;
+$bookmarks-bw-y: 0px;
+$bookmarks-bw-offset-x: -64px;
+$bookmarks-bw-offset-y: 0px;
+$bookmarks-bw-width: 16px;
+$bookmarks-bw-height: 16px;
+$bookmarks-bw-total-width: 144px;
+$bookmarks-bw-total-height: 128px;
+$bookmarks-bw-image: 'sprite-fugue.png';
+$bookmarks-bw: (64px, 0px, -64px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'bookmarks-bw', );
+$bookmarks-name: 'bookmarks';
+$bookmarks-x: 64px;
+$bookmarks-y: 16px;
+$bookmarks-offset-x: -64px;
+$bookmarks-offset-y: -16px;
+$bookmarks-width: 16px;
+$bookmarks-height: 16px;
+$bookmarks-total-width: 144px;
+$bookmarks-total-height: 128px;
+$bookmarks-image: 'sprite-fugue.png';
+$bookmarks: (64px, 16px, -64px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'bookmarks', );
+$bug-name: 'bug';
+$bug-x: 64px;
+$bug-y: 32px;
+$bug-offset-x: -64px;
+$bug-offset-y: -32px;
+$bug-width: 16px;
+$bug-height: 16px;
+$bug-total-width: 144px;
+$bug-total-height: 128px;
+$bug-image: 'sprite-fugue.png';
+$bug: (64px, 32px, -64px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'bug', );
+$chart-name: 'chart';
+$chart-x: 64px;
+$chart-y: 48px;
+$chart-offset-x: -64px;
+$chart-offset-y: -48px;
+$chart-width: 16px;
+$chart-height: 16px;
+$chart-total-width: 144px;
+$chart-total-height: 128px;
+$chart-image: 'sprite-fugue.png';
+$chart: (64px, 48px, -64px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'chart', );
+$chevron-expand-bw-name: 'chevron-expand-bw';
+$chevron-expand-bw-x: 0px;
+$chevron-expand-bw-y: 64px;
+$chevron-expand-bw-offset-x: 0px;
+$chevron-expand-bw-offset-y: -64px;
+$chevron-expand-bw-width: 16px;
+$chevron-expand-bw-height: 16px;
+$chevron-expand-bw-total-width: 144px;
+$chevron-expand-bw-total-height: 128px;
+$chevron-expand-bw-image: 'sprite-fugue.png';
+$chevron-expand-bw: (0px, 64px, 0px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'chevron-expand-bw', );
+$chevron-expand-name: 'chevron-expand';
+$chevron-expand-x: 16px;
+$chevron-expand-y: 64px;
+$chevron-expand-offset-x: -16px;
+$chevron-expand-offset-y: -64px;
+$chevron-expand-width: 16px;
+$chevron-expand-height: 16px;
+$chevron-expand-total-width: 144px;
+$chevron-expand-total-height: 128px;
+$chevron-expand-image: 'sprite-fugue.png';
+$chevron-expand: (16px, 64px, -16px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'chevron-expand', );
+$chevron-name: 'chevron';
+$chevron-x: 32px;
+$chevron-y: 64px;
+$chevron-offset-x: -32px;
+$chevron-offset-y: -64px;
+$chevron-width: 16px;
+$chevron-height: 16px;
+$chevron-total-width: 144px;
+$chevron-total-height: 128px;
+$chevron-image: 'sprite-fugue.png';
+$chevron: (32px, 64px, -32px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'chevron', );
+$control-270-name: 'control-270';
+$control-270-x: 48px;
+$control-270-y: 64px;
+$control-270-offset-x: -48px;
+$control-270-offset-y: -64px;
+$control-270-width: 16px;
+$control-270-height: 16px;
+$control-270-total-width: 144px;
+$control-270-total-height: 128px;
+$control-270-image: 'sprite-fugue.png';
+$control-270: (48px, 64px, -48px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'control-270', );
+$cross-button-name: 'cross-button';
+$cross-button-x: 64px;
+$cross-button-y: 64px;
+$cross-button-offset-x: -64px;
+$cross-button-offset-y: -64px;
+$cross-button-width: 16px;
+$cross-button-height: 16px;
+$cross-button-total-width: 144px;
+$cross-button-total-height: 128px;
+$cross-button-image: 'sprite-fugue.png';
+$cross-button: (64px, 64px, -64px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'cross-button', );
+$cross-circle-bw-name: 'cross-circle-bw';
+$cross-circle-bw-x: 80px;
+$cross-circle-bw-y: 0px;
+$cross-circle-bw-offset-x: -80px;
+$cross-circle-bw-offset-y: 0px;
+$cross-circle-bw-width: 16px;
+$cross-circle-bw-height: 16px;
+$cross-circle-bw-total-width: 144px;
+$cross-circle-bw-total-height: 128px;
+$cross-circle-bw-image: 'sprite-fugue.png';
+$cross-circle-bw: (80px, 0px, -80px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'cross-circle-bw', );
+$cross-circle-name: 'cross-circle';
+$cross-circle-x: 80px;
+$cross-circle-y: 16px;
+$cross-circle-offset-x: -80px;
+$cross-circle-offset-y: -16px;
+$cross-circle-width: 16px;
+$cross-circle-height: 16px;
+$cross-circle-total-width: 144px;
+$cross-circle-total-height: 128px;
+$cross-circle-image: 'sprite-fugue.png';
+$cross-circle: (80px, 16px, -80px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'cross-circle', );
+$cross-small-bw-name: 'cross-small-bw';
+$cross-small-bw-x: 80px;
+$cross-small-bw-y: 32px;
+$cross-small-bw-offset-x: -80px;
+$cross-small-bw-offset-y: -32px;
+$cross-small-bw-width: 16px;
+$cross-small-bw-height: 16px;
+$cross-small-bw-total-width: 144px;
+$cross-small-bw-total-height: 128px;
+$cross-small-bw-image: 'sprite-fugue.png';
+$cross-small-bw: (80px, 32px, -80px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'cross-small-bw', );
+$cross-name: 'cross';
+$cross-x: 80px;
+$cross-y: 48px;
+$cross-offset-x: -80px;
+$cross-offset-y: -48px;
+$cross-width: 16px;
+$cross-height: 16px;
+$cross-total-width: 144px;
+$cross-total-height: 128px;
+$cross-image: 'sprite-fugue.png';
+$cross: (80px, 48px, -80px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'cross', );
+$disk-arrow-bw-name: 'disk--arrow-bw';
+$disk-arrow-bw-x: 80px;
+$disk-arrow-bw-y: 64px;
+$disk-arrow-bw-offset-x: -80px;
+$disk-arrow-bw-offset-y: -64px;
+$disk-arrow-bw-width: 16px;
+$disk-arrow-bw-height: 16px;
+$disk-arrow-bw-total-width: 144px;
+$disk-arrow-bw-total-height: 128px;
+$disk-arrow-bw-image: 'sprite-fugue.png';
+$disk-arrow-bw: (80px, 64px, -80px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'disk--arrow-bw', );
+$disk-arrow-name: 'disk--arrow';
+$disk-arrow-x: 0px;
+$disk-arrow-y: 80px;
+$disk-arrow-offset-x: 0px;
+$disk-arrow-offset-y: -80px;
+$disk-arrow-width: 16px;
+$disk-arrow-height: 16px;
+$disk-arrow-total-width: 144px;
+$disk-arrow-total-height: 128px;
+$disk-arrow-image: 'sprite-fugue.png';
+$disk-arrow: (0px, 80px, 0px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'disk--arrow', );
+$disk-name: 'disk';
+$disk-x: 16px;
+$disk-y: 80px;
+$disk-offset-x: -16px;
+$disk-offset-y: -80px;
+$disk-width: 16px;
+$disk-height: 16px;
+$disk-total-width: 144px;
+$disk-total-height: 128px;
+$disk-image: 'sprite-fugue.png';
+$disk: (16px, 80px, -16px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'disk', );
+$exclamation-name: 'exclamation';
+$exclamation-x: 32px;
+$exclamation-y: 80px;
+$exclamation-offset-x: -32px;
+$exclamation-offset-y: -80px;
+$exclamation-width: 16px;
+$exclamation-height: 16px;
+$exclamation-total-width: 144px;
+$exclamation-total-height: 128px;
+$exclamation-image: 'sprite-fugue.png';
+$exclamation: (32px, 80px, -32px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'exclamation', );
+$external-name: 'external';
+$external-x: 0px;
+$external-y: 0px;
+$external-offset-x: 0px;
+$external-offset-y: 0px;
+$external-width: 16px;
+$external-height: 16px;
+$external-total-width: 144px;
+$external-total-height: 128px;
+$external-image: 'sprite-fugue.png';
+$external: (0px, 0px, 0px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'external', );
+$eye-name: 'eye';
+$eye-x: 64px;
+$eye-y: 80px;
+$eye-offset-x: -64px;
+$eye-offset-y: -80px;
+$eye-width: 16px;
+$eye-height: 16px;
+$eye-total-width: 144px;
+$eye-total-height: 128px;
+$eye-image: 'sprite-fugue.png';
+$eye: (64px, 80px, -64px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'eye', );
+$gear-bw-name: 'gear-bw';
+$gear-bw-x: 80px;
+$gear-bw-y: 80px;
+$gear-bw-offset-x: -80px;
+$gear-bw-offset-y: -80px;
+$gear-bw-width: 16px;
+$gear-bw-height: 16px;
+$gear-bw-total-width: 144px;
+$gear-bw-total-height: 128px;
+$gear-bw-image: 'sprite-fugue.png';
+$gear-bw: (80px, 80px, -80px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'gear-bw', );
+$gear-name: 'gear';
+$gear-x: 96px;
+$gear-y: 0px;
+$gear-offset-x: -96px;
+$gear-offset-y: 0px;
+$gear-width: 16px;
+$gear-height: 16px;
+$gear-total-width: 144px;
+$gear-total-height: 128px;
+$gear-image: 'sprite-fugue.png';
+$gear: (96px, 0px, -96px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'gear', );
+$globe-bw-name: 'globe-bw';
+$globe-bw-x: 96px;
+$globe-bw-y: 16px;
+$globe-bw-offset-x: -96px;
+$globe-bw-offset-y: -16px;
+$globe-bw-width: 16px;
+$globe-bw-height: 16px;
+$globe-bw-total-width: 144px;
+$globe-bw-total-height: 128px;
+$globe-bw-image: 'sprite-fugue.png';
+$globe-bw: (96px, 16px, -96px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'globe-bw', );
+$globe-name: 'globe';
+$globe-x: 96px;
+$globe-y: 32px;
+$globe-offset-x: -96px;
+$globe-offset-y: -32px;
+$globe-width: 16px;
+$globe-height: 16px;
+$globe-total-width: 144px;
+$globe-total-height: 128px;
+$globe-image: 'sprite-fugue.png';
+$globe: (96px, 32px, -96px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'globe', );
+$hammer-bw-name: 'hammer-bw';
+$hammer-bw-x: 96px;
+$hammer-bw-y: 48px;
+$hammer-bw-offset-x: -96px;
+$hammer-bw-offset-y: -48px;
+$hammer-bw-width: 16px;
+$hammer-bw-height: 16px;
+$hammer-bw-total-width: 144px;
+$hammer-bw-total-height: 128px;
+$hammer-bw-image: 'sprite-fugue.png';
+$hammer-bw: (96px, 48px, -96px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'hammer-bw', );
+$hammer-name: 'hammer';
+$hammer-x: 96px;
+$hammer-y: 64px;
+$hammer-offset-x: -96px;
+$hammer-offset-y: -64px;
+$hammer-width: 16px;
+$hammer-height: 16px;
+$hammer-total-width: 144px;
+$hammer-total-height: 128px;
+$hammer-image: 'sprite-fugue.png';
+$hammer: (96px, 64px, -96px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'hammer', );
+$information-white-name: 'information-white';
+$information-white-x: 96px;
+$information-white-y: 80px;
+$information-white-offset-x: -96px;
+$information-white-offset-y: -80px;
+$information-white-width: 16px;
+$information-white-height: 16px;
+$information-white-total-width: 144px;
+$information-white-total-height: 128px;
+$information-white-image: 'sprite-fugue.png';
+$information-white: (96px, 80px, -96px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'information-white', );
+$layer-transparent-bw-name: 'layer-transparent-bw';
+$layer-transparent-bw-x: 0px;
+$layer-transparent-bw-y: 96px;
+$layer-transparent-bw-offset-x: 0px;
+$layer-transparent-bw-offset-y: -96px;
+$layer-transparent-bw-width: 16px;
+$layer-transparent-bw-height: 16px;
+$layer-transparent-bw-total-width: 144px;
+$layer-transparent-bw-total-height: 128px;
+$layer-transparent-bw-image: 'sprite-fugue.png';
+$layer-transparent-bw: (0px, 96px, 0px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'layer-transparent-bw', );
+$layer-transparent-name: 'layer-transparent';
+$layer-transparent-x: 16px;
+$layer-transparent-y: 96px;
+$layer-transparent-offset-x: -16px;
+$layer-transparent-offset-y: -96px;
+$layer-transparent-width: 16px;
+$layer-transparent-height: 16px;
+$layer-transparent-total-width: 144px;
+$layer-transparent-total-height: 128px;
+$layer-transparent-image: 'sprite-fugue.png';
+$layer-transparent: (16px, 96px, -16px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'layer-transparent', );
+$layers-stack-bw-name: 'layers-stack-bw';
+$layers-stack-bw-x: 32px;
+$layers-stack-bw-y: 96px;
+$layers-stack-bw-offset-x: -32px;
+$layers-stack-bw-offset-y: -96px;
+$layers-stack-bw-width: 16px;
+$layers-stack-bw-height: 16px;
+$layers-stack-bw-total-width: 144px;
+$layers-stack-bw-total-height: 128px;
+$layers-stack-bw-image: 'sprite-fugue.png';
+$layers-stack-bw: (32px, 96px, -32px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'layers-stack-bw', );
+$layers-stack-name: 'layers-stack';
+$layers-stack-x: 48px;
+$layers-stack-y: 96px;
+$layers-stack-offset-x: -48px;
+$layers-stack-offset-y: -96px;
+$layers-stack-width: 16px;
+$layers-stack-height: 16px;
+$layers-stack-total-width: 144px;
+$layers-stack-total-height: 128px;
+$layers-stack-image: 'sprite-fugue.png';
+$layers-stack: (48px, 96px, -48px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'layers-stack', );
+$magnifier-left-name: 'magnifier-left';
+$magnifier-left-x: 64px;
+$magnifier-left-y: 96px;
+$magnifier-left-offset-x: -64px;
+$magnifier-left-offset-y: -96px;
+$magnifier-left-width: 16px;
+$magnifier-left-height: 16px;
+$magnifier-left-total-width: 144px;
+$magnifier-left-total-height: 128px;
+$magnifier-left-image: 'sprite-fugue.png';
+$magnifier-left: (64px, 96px, -64px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'magnifier-left', );
+$magnifier-zoom-out-name: 'magnifier-zoom-out';
+$magnifier-zoom-out-x: 80px;
+$magnifier-zoom-out-y: 96px;
+$magnifier-zoom-out-offset-x: -80px;
+$magnifier-zoom-out-offset-y: -96px;
+$magnifier-zoom-out-width: 16px;
+$magnifier-zoom-out-height: 16px;
+$magnifier-zoom-out-total-width: 144px;
+$magnifier-zoom-out-total-height: 128px;
+$magnifier-zoom-out-image: 'sprite-fugue.png';
+$magnifier-zoom-out: (80px, 96px, -80px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'magnifier-zoom-out', );
+$magnifier-zoom-name: 'magnifier-zoom';
+$magnifier-zoom-x: 96px;
+$magnifier-zoom-y: 96px;
+$magnifier-zoom-offset-x: -96px;
+$magnifier-zoom-offset-y: -96px;
+$magnifier-zoom-width: 16px;
+$magnifier-zoom-height: 16px;
+$magnifier-zoom-total-width: 144px;
+$magnifier-zoom-total-height: 128px;
+$magnifier-zoom-image: 'sprite-fugue.png';
+$magnifier-zoom: (96px, 96px, -96px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'magnifier-zoom', );
+$navigation-name: 'navigation';
+$navigation-x: 112px;
+$navigation-y: 0px;
+$navigation-offset-x: -112px;
+$navigation-offset-y: 0px;
+$navigation-width: 16px;
+$navigation-height: 16px;
+$navigation-total-width: 144px;
+$navigation-total-height: 128px;
+$navigation-image: 'sprite-fugue.png';
+$navigation: (112px, 0px, -112px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'navigation', );
+$pencil-small-name: 'pencil-small';
+$pencil-small-x: 112px;
+$pencil-small-y: 16px;
+$pencil-small-offset-x: -112px;
+$pencil-small-offset-y: -16px;
+$pencil-small-width: 16px;
+$pencil-small-height: 16px;
+$pencil-small-total-width: 144px;
+$pencil-small-total-height: 128px;
+$pencil-small-image: 'sprite-fugue.png';
+$pencil-small: (112px, 16px, -112px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'pencil-small', );
+$pencil-name: 'pencil';
+$pencil-x: 112px;
+$pencil-y: 32px;
+$pencil-offset-x: -112px;
+$pencil-offset-y: -32px;
+$pencil-width: 16px;
+$pencil-height: 16px;
+$pencil-total-width: 144px;
+$pencil-total-height: 128px;
+$pencil-image: 'sprite-fugue.png';
+$pencil: (112px, 32px, -112px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'pencil', );
+$plus-button-bw-name: 'plus-button-bw';
+$plus-button-bw-x: 112px;
+$plus-button-bw-y: 48px;
+$plus-button-bw-offset-x: -112px;
+$plus-button-bw-offset-y: -48px;
+$plus-button-bw-width: 16px;
+$plus-button-bw-height: 16px;
+$plus-button-bw-total-width: 144px;
+$plus-button-bw-total-height: 128px;
+$plus-button-bw-image: 'sprite-fugue.png';
+$plus-button-bw: (112px, 48px, -112px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'plus-button-bw', );
+$plus-button-name: 'plus-button';
+$plus-button-x: 112px;
+$plus-button-y: 64px;
+$plus-button-offset-x: -112px;
+$plus-button-offset-y: -64px;
+$plus-button-width: 16px;
+$plus-button-height: 16px;
+$plus-button-total-width: 144px;
+$plus-button-total-height: 128px;
+$plus-button-image: 'sprite-fugue.png';
+$plus-button: (112px, 64px, -112px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'plus-button', );
+$plus-circle-name: 'plus-circle';
+$plus-circle-x: 112px;
+$plus-circle-y: 80px;
+$plus-circle-offset-x: -112px;
+$plus-circle-offset-y: -80px;
+$plus-circle-width: 16px;
+$plus-circle-height: 16px;
+$plus-circle-total-width: 144px;
+$plus-circle-total-height: 128px;
+$plus-circle-image: 'sprite-fugue.png';
+$plus-circle: (112px, 80px, -112px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'plus-circle', );
+$sticky-note-text-name: 'sticky-note-text';
+$sticky-note-text-x: 112px;
+$sticky-note-text-y: 96px;
+$sticky-note-text-offset-x: -112px;
+$sticky-note-text-offset-y: -96px;
+$sticky-note-text-width: 16px;
+$sticky-note-text-height: 16px;
+$sticky-note-text-total-width: 144px;
+$sticky-note-text-total-height: 128px;
+$sticky-note-text-image: 'sprite-fugue.png';
+$sticky-note-text: (112px, 96px, -112px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'sticky-note-text', );
+$tag-plus-name: 'tag--plus';
+$tag-plus-x: 0px;
+$tag-plus-y: 112px;
+$tag-plus-offset-x: 0px;
+$tag-plus-offset-y: -112px;
+$tag-plus-width: 16px;
+$tag-plus-height: 16px;
+$tag-plus-total-width: 144px;
+$tag-plus-total-height: 128px;
+$tag-plus-image: 'sprite-fugue.png';
+$tag-plus: (0px, 112px, 0px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'tag--plus', );
+$tag-label-name: 'tag-label';
+$tag-label-x: 16px;
+$tag-label-y: 112px;
+$tag-label-offset-x: -16px;
+$tag-label-offset-y: -112px;
+$tag-label-width: 16px;
+$tag-label-height: 16px;
+$tag-label-total-width: 144px;
+$tag-label-total-height: 128px;
+$tag-label-image: 'sprite-fugue.png';
+$tag-label: (16px, 112px, -16px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'tag-label', );
+$tags-name: 'tags';
+$tags-x: 32px;
+$tags-y: 112px;
+$tags-offset-x: -32px;
+$tags-offset-y: -112px;
+$tags-width: 16px;
+$tags-height: 16px;
+$tags-total-width: 144px;
+$tags-total-height: 128px;
+$tags-image: 'sprite-fugue.png';
+$tags: (32px, 112px, -32px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'tags', );
+$toggle-bw-name: 'toggle-bw';
+$toggle-bw-x: 48px;
+$toggle-bw-y: 112px;
+$toggle-bw-offset-x: -48px;
+$toggle-bw-offset-y: -112px;
+$toggle-bw-width: 16px;
+$toggle-bw-height: 16px;
+$toggle-bw-total-width: 144px;
+$toggle-bw-total-height: 128px;
+$toggle-bw-image: 'sprite-fugue.png';
+$toggle-bw: (48px, 112px, -48px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'toggle-bw', );
+$toggle-expand-bw-name: 'toggle-expand-bw';
+$toggle-expand-bw-x: 64px;
+$toggle-expand-bw-y: 112px;
+$toggle-expand-bw-offset-x: -64px;
+$toggle-expand-bw-offset-y: -112px;
+$toggle-expand-bw-width: 16px;
+$toggle-expand-bw-height: 16px;
+$toggle-expand-bw-total-width: 144px;
+$toggle-expand-bw-total-height: 128px;
+$toggle-expand-bw-image: 'sprite-fugue.png';
+$toggle-expand-bw: (64px, 112px, -64px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'toggle-expand-bw', );
+$toggle-expand-name: 'toggle-expand';
+$toggle-expand-x: 80px;
+$toggle-expand-y: 112px;
+$toggle-expand-offset-x: -80px;
+$toggle-expand-offset-y: -112px;
+$toggle-expand-width: 16px;
+$toggle-expand-height: 16px;
+$toggle-expand-total-width: 144px;
+$toggle-expand-total-height: 128px;
+$toggle-expand-image: 'sprite-fugue.png';
+$toggle-expand: (80px, 112px, -80px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'toggle-expand', );
+$toggle-name: 'toggle';
+$toggle-x: 96px;
+$toggle-y: 112px;
+$toggle-offset-x: -96px;
+$toggle-offset-y: -112px;
+$toggle-width: 16px;
+$toggle-height: 16px;
+$toggle-total-width: 144px;
+$toggle-total-height: 128px;
+$toggle-image: 'sprite-fugue.png';
+$toggle: (96px, 112px, -96px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'toggle', );
+$toolbox-bw-name: 'toolbox-bw';
+$toolbox-bw-x: 112px;
+$toolbox-bw-y: 112px;
+$toolbox-bw-offset-x: -112px;
+$toolbox-bw-offset-y: -112px;
+$toolbox-bw-width: 16px;
+$toolbox-bw-height: 16px;
+$toolbox-bw-total-width: 144px;
+$toolbox-bw-total-height: 128px;
+$toolbox-bw-image: 'sprite-fugue.png';
+$toolbox-bw: (112px, 112px, -112px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'toolbox-bw', );
+$toolbox-name: 'toolbox';
+$toolbox-x: 128px;
+$toolbox-y: 0px;
+$toolbox-offset-x: -128px;
+$toolbox-offset-y: 0px;
+$toolbox-width: 16px;
+$toolbox-height: 16px;
+$toolbox-total-width: 144px;
+$toolbox-total-height: 128px;
+$toolbox-image: 'sprite-fugue.png';
+$toolbox: (128px, 0px, -128px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'toolbox', );
+$ui-slider-050-bw-name: 'ui-slider-050-bw';
+$ui-slider-050-bw-x: 128px;
+$ui-slider-050-bw-y: 16px;
+$ui-slider-050-bw-offset-x: -128px;
+$ui-slider-050-bw-offset-y: -16px;
+$ui-slider-050-bw-width: 16px;
+$ui-slider-050-bw-height: 16px;
+$ui-slider-050-bw-total-width: 144px;
+$ui-slider-050-bw-total-height: 128px;
+$ui-slider-050-bw-image: 'sprite-fugue.png';
+$ui-slider-050-bw: (128px, 16px, -128px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'ui-slider-050-bw', );
+$ui-slider-050-name: 'ui-slider-050';
+$ui-slider-050-x: 128px;
+$ui-slider-050-y: 32px;
+$ui-slider-050-offset-x: -128px;
+$ui-slider-050-offset-y: -32px;
+$ui-slider-050-width: 16px;
+$ui-slider-050-height: 16px;
+$ui-slider-050-total-width: 144px;
+$ui-slider-050-total-height: 128px;
+$ui-slider-050-image: 'sprite-fugue.png';
+$ui-slider-050: (128px, 32px, -128px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'ui-slider-050', );
+$spritesheet-width: 144px;
+$spritesheet-height: 128px;
+$spritesheet-image: 'sprite-fugue.png';
+$spritesheet-sprites: ($application-dock-270-bw, $application-dock-270, $arrow-000-small-bw, $arrow-090, $arrow-circle, $arrow-resize-090-bw, $arrow-resize-090, $arrow-split-bw, $arrow-split, $arrow-transition-270-bw, $arrow-transition-bw, $asterisk-small-outline, $asterisk-small-yellow, $asterisk-small, $block-plus-bw, $block-plus, $bookmarks-bw, $bookmarks, $bug, $chart, $chevron-expand-bw, $chevron-expand, $chevron, $control-270, $cross-button, $cross-circle-bw, $cross-circle, $cross-small-bw, $cross, $disk-arrow-bw, $disk-arrow, $disk, $exclamation, $external, $eye, $gear-bw, $gear, $globe-bw, $globe, $hammer-bw, $hammer, $information-white, $layer-transparent-bw, $layer-transparent, $layers-stack-bw, $layers-stack, $magnifier-left, $magnifier-zoom-out, $magnifier-zoom, $navigation, $pencil-small, $pencil, $plus-button-bw, $plus-button, $plus-circle, $sticky-note-text, $tag-plus, $tag-label, $tags, $toggle-bw, $toggle-expand-bw, $toggle-expand, $toggle, $toolbox-bw, $toolbox, $ui-slider-050-bw, $ui-slider-050, );
+$spritesheet: (144px, 128px, 'sprite-fugue.png', $spritesheet-sprites, );
+
+/*
+The provided mixins are intended to be used with the array-like variables
+
+.icon-home {
+  @include sprite-width($icon-home);
+}
+
+.icon-email {
+  @include sprite($icon-email);
+}
+*/
+@mixin sprite-width($sprite) {
+  width: nth($sprite, 5);
+}
+
+@mixin sprite-height($sprite) {
+  height: nth($sprite, 6);
+}
+
+@mixin sprite-position($sprite) {
+  $sprite-offset-x: nth($sprite, 3);
+  $sprite-offset-y: nth($sprite, 4);
+  background-position: $sprite-offset-x  $sprite-offset-y;
+}
+
+@mixin sprite-image($sprite) {
+  $sprite-image: nth($sprite, 9);
+  background-image: url(#{$sprite-image});
+}
+
+@mixin sprite($sprite) {
+  @include sprite-image($sprite);
+  @include sprite-position($sprite);
+  @include sprite-width($sprite);
+  @include sprite-height($sprite);
+}
+
+/*
+The `sprites` mixin generates identical output to the CSS template
+  but can be overridden inside of SCSS
+
+@include sprites($spritesheet-sprites);
+*/
+@mixin sprites($sprites) {
+  @each $sprite in $sprites {
+    $sprite-name: nth($sprite, 10);
+    .#{$sprite-name} {
+      @include sprite($sprite);
+    }
+  }
+}
diff --git a/client/galaxy/style/scss/sprite-history-buttons.scss b/client/galaxy/style/scss/sprite-history-buttons.scss
new file mode 100644
index 00000000000..5f22548e701
--- /dev/null
+++ b/client/galaxy/style/scss/sprite-history-buttons.scss
@@ -0,0 +1,169 @@
+/*
+SCSS variables are information about icon's compiled state, stored under its original file name
+
+.icon-home {
+  width: $icon-home-width;
+}
+
+The large array-like variables contain all information about a single icon
+$icon-home: x y offset_x offset_y width height total_width total_height image_path;
+
+At the bottom of this section, we provide information about the spritesheet itself
+$spritesheet: width height image $spritesheet-sprites;
+*/
+$delete-icon-name: 'delete_icon';
+$delete-icon-x: 0px;
+$delete-icon-y: 0px;
+$delete-icon-offset-x: 0px;
+$delete-icon-offset-y: 0px;
+$delete-icon-width: 16px;
+$delete-icon-height: 16px;
+$delete-icon-total-width: 48px;
+$delete-icon-total-height: 48px;
+$delete-icon-image: 'sprite-history-buttons.png';
+$delete-icon: (0px, 0px, 0px, 0px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'delete_icon', );
+$delete-icon-dark-name: 'delete_icon_dark';
+$delete-icon-dark-x: 16px;
+$delete-icon-dark-y: 0px;
+$delete-icon-dark-offset-x: -16px;
+$delete-icon-dark-offset-y: 0px;
+$delete-icon-dark-width: 16px;
+$delete-icon-dark-height: 16px;
+$delete-icon-dark-total-width: 48px;
+$delete-icon-dark-total-height: 48px;
+$delete-icon-dark-image: 'sprite-history-buttons.png';
+$delete-icon-dark: (16px, 0px, -16px, 0px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'delete_icon_dark', );
+$delete-icon-grey-name: 'delete_icon_grey';
+$delete-icon-grey-x: 0px;
+$delete-icon-grey-y: 16px;
+$delete-icon-grey-offset-x: 0px;
+$delete-icon-grey-offset-y: -16px;
+$delete-icon-grey-width: 16px;
+$delete-icon-grey-height: 16px;
+$delete-icon-grey-total-width: 48px;
+$delete-icon-grey-total-height: 48px;
+$delete-icon-grey-image: 'sprite-history-buttons.png';
+$delete-icon-grey: (0px, 16px, 0px, -16px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'delete_icon_grey', );
+$eye-icon-name: 'eye_icon';
+$eye-icon-x: 16px;
+$eye-icon-y: 16px;
+$eye-icon-offset-x: -16px;
+$eye-icon-offset-y: -16px;
+$eye-icon-width: 16px;
+$eye-icon-height: 16px;
+$eye-icon-total-width: 48px;
+$eye-icon-total-height: 48px;
+$eye-icon-image: 'sprite-history-buttons.png';
+$eye-icon: (16px, 16px, -16px, -16px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'eye_icon', );
+$eye-icon-dark-name: 'eye_icon_dark';
+$eye-icon-dark-x: 32px;
+$eye-icon-dark-y: 0px;
+$eye-icon-dark-offset-x: -32px;
+$eye-icon-dark-offset-y: 0px;
+$eye-icon-dark-width: 16px;
+$eye-icon-dark-height: 16px;
+$eye-icon-dark-total-width: 48px;
+$eye-icon-dark-total-height: 48px;
+$eye-icon-dark-image: 'sprite-history-buttons.png';
+$eye-icon-dark: (32px, 0px, -32px, 0px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'eye_icon_dark', );
+$eye-icon-grey-name: 'eye_icon_grey';
+$eye-icon-grey-x: 32px;
+$eye-icon-grey-y: 16px;
+$eye-icon-grey-offset-x: -32px;
+$eye-icon-grey-offset-y: -16px;
+$eye-icon-grey-width: 16px;
+$eye-icon-grey-height: 16px;
+$eye-icon-grey-total-width: 48px;
+$eye-icon-grey-total-height: 48px;
+$eye-icon-grey-image: 'sprite-history-buttons.png';
+$eye-icon-grey: (32px, 16px, -32px, -16px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'eye_icon_grey', );
+$pencil-icon-name: 'pencil_icon';
+$pencil-icon-x: 0px;
+$pencil-icon-y: 32px;
+$pencil-icon-offset-x: 0px;
+$pencil-icon-offset-y: -32px;
+$pencil-icon-width: 16px;
+$pencil-icon-height: 16px;
+$pencil-icon-total-width: 48px;
+$pencil-icon-total-height: 48px;
+$pencil-icon-image: 'sprite-history-buttons.png';
+$pencil-icon: (0px, 32px, 0px, -32px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'pencil_icon', );
+$pencil-icon-dark-name: 'pencil_icon_dark';
+$pencil-icon-dark-x: 16px;
+$pencil-icon-dark-y: 32px;
+$pencil-icon-dark-offset-x: -16px;
+$pencil-icon-dark-offset-y: -32px;
+$pencil-icon-dark-width: 16px;
+$pencil-icon-dark-height: 16px;
+$pencil-icon-dark-total-width: 48px;
+$pencil-icon-dark-total-height: 48px;
+$pencil-icon-dark-image: 'sprite-history-buttons.png';
+$pencil-icon-dark: (16px, 32px, -16px, -32px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'pencil_icon_dark', );
+$pencil-icon-grey-name: 'pencil_icon_grey';
+$pencil-icon-grey-x: 32px;
+$pencil-icon-grey-y: 32px;
+$pencil-icon-grey-offset-x: -32px;
+$pencil-icon-grey-offset-y: -32px;
+$pencil-icon-grey-width: 16px;
+$pencil-icon-grey-height: 16px;
+$pencil-icon-grey-total-width: 48px;
+$pencil-icon-grey-total-height: 48px;
+$pencil-icon-grey-image: 'sprite-history-buttons.png';
+$pencil-icon-grey: (32px, 32px, -32px, -32px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'pencil_icon_grey', );
+$spritesheet-width: 48px;
+$spritesheet-height: 48px;
+$spritesheet-image: 'sprite-history-buttons.png';
+$spritesheet-sprites: ($delete-icon, $delete-icon-dark, $delete-icon-grey, $eye-icon, $eye-icon-dark, $eye-icon-grey, $pencil-icon, $pencil-icon-dark, $pencil-icon-grey, );
+$spritesheet: (48px, 48px, 'sprite-history-buttons.png', $spritesheet-sprites, );
+
+/*
+The provided mixins are intended to be used with the array-like variables
+
+.icon-home {
+  @include sprite-width($icon-home);
+}
+
+.icon-email {
+  @include sprite($icon-email);
+}
+*/
+@mixin sprite-width($sprite) {
+  width: nth($sprite, 5);
+}
+
+@mixin sprite-height($sprite) {
+  height: nth($sprite, 6);
+}
+
+@mixin sprite-position($sprite) {
+  $sprite-offset-x: nth($sprite, 3);
+  $sprite-offset-y: nth($sprite, 4);
+  background-position: $sprite-offset-x  $sprite-offset-y;
+}
+
+@mixin sprite-image($sprite) {
+  $sprite-image: nth($sprite, 9);
+  background-image: url(#{$sprite-image});
+}
+
+@mixin sprite($sprite) {
+  @include sprite-image($sprite);
+  @include sprite-position($sprite);
+  @include sprite-width($sprite);
+  @include sprite-height($sprite);
+}
+
+/*
+The `sprites` mixin generates identical output to the CSS template
+  but can be overridden inside of SCSS
+
+@include sprites($spritesheet-sprites);
+*/
+@mixin sprites($sprites) {
+  @each $sprite in $sprites {
+    $sprite-name: nth($sprite, 10);
+    .#{$sprite-name} {
+      @include sprite($sprite);
+    }
+  }
+}
diff --git a/client/galaxy/style/scss/sprite-history-states.scss b/client/galaxy/style/scss/sprite-history-states.scss
new file mode 100644
index 00000000000..4e5b0f6c31d
--- /dev/null
+++ b/client/galaxy/style/scss/sprite-history-states.scss
@@ -0,0 +1,114 @@
+/*
+SCSS variables are information about icon's compiled state, stored under its original file name
+
+.icon-home {
+  width: $icon-home-width;
+}
+
+The large array-like variables contain all information about a single icon
+$icon-home: x y offset_x offset_y width height total_width total_height image_path;
+
+At the bottom of this section, we provide information about the spritesheet itself
+$spritesheet: width height image $spritesheet-sprites;
+*/
+$data-empty-name: 'data_empty';
+$data-empty-x: 0px;
+$data-empty-y: 0px;
+$data-empty-offset-x: 0px;
+$data-empty-offset-y: 0px;
+$data-empty-width: 15px;
+$data-empty-height: 15px;
+$data-empty-total-width: 30px;
+$data-empty-total-height: 30px;
+$data-empty-image: 'sprite-history-states.png';
+$data-empty: (0px, 0px, 0px, 0px, 15px, 15px, 30px, 30px, 'sprite-history-states.png', 'data_empty', );
+$data-error-name: 'data_error';
+$data-error-x: 15px;
+$data-error-y: 0px;
+$data-error-offset-x: -15px;
+$data-error-offset-y: 0px;
+$data-error-width: 15px;
+$data-error-height: 15px;
+$data-error-total-width: 30px;
+$data-error-total-height: 30px;
+$data-error-image: 'sprite-history-states.png';
+$data-error: (15px, 0px, -15px, 0px, 15px, 15px, 30px, 30px, 'sprite-history-states.png', 'data_error', );
+$data-ok-name: 'data_ok';
+$data-ok-x: 0px;
+$data-ok-y: 15px;
+$data-ok-offset-x: 0px;
+$data-ok-offset-y: -15px;
+$data-ok-width: 15px;
+$data-ok-height: 15px;
+$data-ok-total-width: 30px;
+$data-ok-total-height: 30px;
+$data-ok-image: 'sprite-history-states.png';
+$data-ok: (0px, 15px, 0px, -15px, 15px, 15px, 30px, 30px, 'sprite-history-states.png', 'data_ok', );
+$data-queued-name: 'data_queued';
+$data-queued-x: 15px;
+$data-queued-y: 15px;
+$data-queued-offset-x: -15px;
+$data-queued-offset-y: -15px;
+$data-queued-width: 15px;
+$data-queued-height: 15px;
+$data-queued-total-width: 30px;
+$data-queued-total-height: 30px;
+$data-queued-image: 'sprite-history-states.png';
+$data-queued: (15px, 15px, -15px, -15px, 15px, 15px, 30px, 30px, 'sprite-history-states.png', 'data_queued', );
+$spritesheet-width: 30px;
+$spritesheet-height: 30px;
+$spritesheet-image: 'sprite-history-states.png';
+$spritesheet-sprites: ($data-empty, $data-error, $data-ok, $data-queued, );
+$spritesheet: (30px, 30px, 'sprite-history-states.png', $spritesheet-sprites, );
+
+/*
+The provided mixins are intended to be used with the array-like variables
+
+.icon-home {
+  @include sprite-width($icon-home);
+}
+
+.icon-email {
+  @include sprite($icon-email);
+}
+*/
+@mixin sprite-width($sprite) {
+  width: nth($sprite, 5);
+}
+
+@mixin sprite-height($sprite) {
+  height: nth($sprite, 6);
+}
+
+@mixin sprite-position($sprite) {
+  $sprite-offset-x: nth($sprite, 3);
+  $sprite-offset-y: nth($sprite, 4);
+  background-position: $sprite-offset-x  $sprite-offset-y;
+}
+
+@mixin sprite-image($sprite) {
+  $sprite-image: nth($sprite, 9);
+  background-image: url(#{$sprite-image});
+}
+
+@mixin sprite($sprite) {
+  @include sprite-image($sprite);
+  @include sprite-position($sprite);
+  @include sprite-width($sprite);
+  @include sprite-height($sprite);
+}
+
+/*
+The `sprites` mixin generates identical output to the CSS template
+  but can be overridden inside of SCSS
+
+@include sprites($spritesheet-sprites);
+*/
+@mixin sprites($sprites) {
+  @each $sprite in $sprites {
+    $sprite-name: nth($sprite, 10);
+    .#{$sprite-name} {
+      @include sprite($sprite);
+    }
+  }
+}