diff --git a/editor/images/svg_edit_icons.svg b/editor/images/svg_edit_icons.svg
index 6b2609ed..61809b37 100644
--- a/editor/images/svg_edit_icons.svg
+++ b/editor/images/svg_edit_icons.svg
@@ -26,6 +26,45 @@
 </svg>
 </foreignContent>
 
+<foreignContent id="rect">
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+ <defs>
+  <linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_2">
+   <stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
+   <stop stop-opacity="1" stop-color="#3b7e9b" offset="1"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <title>Layer 1</title>
+  <rect transform="matrix(1, 0, 0, 1, 0, 0)" stroke="#000000" fill="url(#svg_2)" id="svg_1" height="10" width="20" y="6.5" x="1.5"/>
+ </g>
+</svg>
+</foreignContent>
+
+<foreignContent id="fh_rect">
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+ <defs>
+  <linearGradient y2="1" x2="1" y1="0.10156" x1="0.36328" id="svg_2">
+   <stop stop-opacity="1" stop-color="#ffffff" offset="0"/>
+   <stop stop-opacity="1" stop-color="#3b7e9b" offset="1"/>
+  </linearGradient>
+  <linearGradient y2="0.3945" x2="0.6132" y1="0.1093" x1="0.3046" id="svg_9">
+   <stop stop-opacity="1" stop-color="#f9d225" offset="0"/>
+   <stop stop-opacity="1" stop-color="#bf5f00" offset="1"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <title>Layer 1</title>
+  <rect stroke="#000000" stroke-width="2" fill="url(#svg_2)" id="svg_1" height="50" width="50" y="0.75" x="1.25"/>
+  <path stroke-width="2" stroke="#000000" fill="url(#svg_9)" id="svg_2" d="m31.5,0l-8.75,20.25l0.75,24l16.5,-16.5l6,-12.5"/>
+  <path stroke-width="2" stroke="#000000" fill="#fce0a9" id="svg_10" d="m39.5,28.5c-2,-9.25 -10.25,-11.75 -17,-7.4375l0.4843,24.4414z"/>
+  <path id="svg_11" stroke-width="2" stroke="#000000" fill="#000000" d="m26.9318,41.1745c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905l0.1087,6.2126z"/>
+ </g>
+</svg>
+</foreignContent>
+
+
 <foreignContent id="circle">
 <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" id="svgzoom">
  <defs>
@@ -34,8 +73,44 @@
    <stop stop-opacity="1" stop-color="#ff6666" offset="1.0"/>
   </linearGradient>
  </defs>
- <g style="pointer-events: all;">
-  <circle stroke-opacity="1" fill-opacity="1" style="pointer-events: all;" stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" r="23" cy="27" cx="27"/>
+ <g>
+  <circle stroke-opacity="1" fill-opacity="1" stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" r="23" cy="27" cx="27"/>
+ </g>
+</svg>
+</foreignContent>
+
+<foreignContent id="ellipse">
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" id="svgzoom">
+ <defs>
+  <linearGradient y2="1.0" x2="1.0" y1="0.1875" x1="0.171875" id="svg_4">
+   <stop stop-opacity="1" stop-color="#ffffff" offset="0.0"/>
+   <stop stop-opacity="1" stop-color="#ff6666" offset="1.0"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <ellipse stroke-opacity="1" fill-opacity="1" stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" rx="23" ry="12" cy="27" cx="27"/>
+ </g>
+</svg>
+</foreignContent>
+
+<foreignContent id="fh_ellipse">
+<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <linearGradient id="svg_9" x1="0.3046" y1="0.1093" x2="0.6132" y2="0.3945">
+   <stop offset="0" stop-color="#f9d225" stop-opacity="1"/>
+   <stop offset="1" stop-color="#bf5f00" stop-opacity="1"/>
+  </linearGradient>
+  <linearGradient id="svg_4" x1="0.17188" y1="0.1875" x2="1" y2="1">
+   <stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
+   <stop offset="1" stop-color="#ff6666" stop-opacity="1"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <title>Layer 1</title>
+  <ellipse stroke-width="2" stroke="#000000" fill="url(#svg_4)" id="svg_1" rx="23" ry="12" cy="37" cx="27"/>
+  <path d="m31.5,0l-8.75,20.25l0.75,24l16.5,-16.5l6,-12.5" id="svg_2" fill="url(#svg_9)" stroke="#000000" stroke-width="2"/>
+  <path d="m39.5,28.5c-2,-9.25 -10.25,-11.75 -17,-7.4375l0.4843,24.4414z" id="svg_10" fill="#fce0a9" stroke="#000000" stroke-width="2"/>
+  <path d="m26.9318,41.1745c-0.4491,-2.3511 -2.3021,-2.9866 -3.8181,-1.8905l0.1087,6.2126z" fill="#000000" stroke="#000000" stroke-width="2" id="svg_11"/>
  </g>
 </svg>
 </foreignContent>
@@ -395,6 +470,62 @@
 </svg>
 </foreignContent>
 
+<foreignContent id="group">
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+ <defs>
+  <linearGradient id="svg_90" x1="0" y1="0" x2="1" y2="1">
+   <stop offset="0" stop-color="#ccddff" stop-opacity="1"/>
+   <stop offset="1" stop-color="#789fed" stop-opacity="1"/>
+  </linearGradient>
+  <linearGradient id="svg_92" x1="0" y1="0" x2="1" y2="1">
+   <stop offset="0" stop-color="#70a1e5" stop-opacity="1"/>
+   <stop offset="1" stop-color="#4b6baf" stop-opacity="1"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <title>Layer 1</title>
+  <rect x="13.5" y="0.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_79"/>
+  <rect x="13.5" y="13.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_82"/>
+  <rect x="0.5" y="13.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_83"/>
+  <rect x="2.5" y="2.5" width="8" height="7" fill="#a0a0a0" stroke="#555555" id="svg_85"/>
+  <rect x="2.5" y="2.5" width="8" height="7" fill="url(#svg_90)" stroke="url(#svg_92)" id="svg_87"/>
+  <rect x="5.5" y="6.5" width="8" height="7" id="svg_84" fill="#7399d6" stroke="url(#svg_92)"/>
+  <rect x="0.5" y="0.5" width="2" height="2" id="svg_78" fill="#a0a0a0" stroke="#555555"/>
+ </g>
+</svg>
+</foreignContent>
+
+<foreignContent id="ungroup">
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+ <defs>
+  <linearGradient id="svg_90" x1="0" y1="0" x2="1" y2="1">
+   <stop offset="0" stop-color="#ccddff" stop-opacity="1"/>
+   <stop offset="1" stop-color="#789fed" stop-opacity="1"/>
+  </linearGradient>
+  <linearGradient id="svg_92" x1="0" y1="0" x2="1" y2="1">
+   <stop offset="0" stop-color="#70a1e5" stop-opacity="1"/>
+   <stop offset="1" stop-color="#4b6baf" stop-opacity="1"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <rect x="2.5" y="2.5" width="8" height="7" fill="url(#svg_90)" stroke="url(#svg_92)" id="svg_87"/>
+  <rect x="5.5" y="6.5" width="8" height="7" id="svg_84" fill="#7399d6" stroke="url(#svg_92)"/>
+  <title>Layer 1</title>
+  <rect x="9.5" y="1.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_79"/>
+  <rect x="1.5" y="8.5" width="2" height="2" fill="#a0a0a0" stroke="#555555" id="svg_83"/>
+  <rect x="1.5" y="1.5" width="2" height="2" id="svg_78" fill="#a0a0a0" stroke="#555555"/>
+  <rect id="svg_93" x="12.5" y="5.5" width="2" height="2" fill="#a0a0a0" stroke="#555555"/>
+  <rect id="svg_94" x="12.5" y="12.5" width="2" height="2" fill="#a0a0a0" stroke="#555555"/>
+  <rect id="svg_95" x="4.5" y="12.5" width="2" height="2" fill="#a0a0a0" stroke="#555555"/>
+  <rect id="svg_96" x="4.5" y="5.5" width="2" height="2" fill="#a0a0a0" stroke="#555555"/>
+ </g>
+</svg>
+</foreignContent>
+
+
+
 <g id="svg_eof"/>
 
 </svg>
\ No newline at end of file
diff --git a/editor/svg-editor-svgicons.html b/editor/svg-editor-svgicons.html
index 752768ba..b2e86d46 100644
--- a/editor/svg-editor-svgicons.html
+++ b/editor/svg-editor-svgicons.html
@@ -21,7 +21,10 @@
 <script type="text/javascript" src="http://svg-icon-loader.googlecode.com/svn/trunk/jquery.svgicons.js"></script>
 
 <style>
-#svg_editor .tool_button {
+#svg_editor .tool_button,
+#svg_editor #tools_rect .tool_flyout_button,
+#svg_editor #tools_ellipse .tool_flyout_button {
+	padding: 2px;
 	width: 24px;
 	height: 24px;
 }
@@ -71,8 +74,32 @@
 	border-bottom: 1px solid #808080;
 }
 
+
+#svg_editor #tool_square,  
+#svg_editor #tool_rect,
+#svg_editor #tool_fhrect,
+#svg_editor #tool_circle,  
+#svg_editor #tool_ellipse,
+#svg_editor #tool_fhellipse {
+	background: none;
+}
+
 </style>
 <script>
+/*
+TODO for SVG icons:
+
+- Make alignment SVG icons
+- Make layer eye SVG icon
+- Make layer icons bigger for l and xl (not s) 
+- Fix SVG logo to work with icon-loader
+- Make no-color (red X) SVG icon
+- Make flyout buttons work in Opera
+- Fix spinner on large icons (probably a lot of work)
+- Other sizing tweaks
+
+
+*/
 $(function() {
 	$.svgIcons('images/svg_edit_icons.svg', {
 		w:24, h:24,
@@ -92,16 +119,28 @@ $(function() {
 			'pencil':'fhpath.png',
 			'pen':'line.png',
 			'square':'square.png',
+			'rect':'rect.png',
+			'fh_rect':'freehand-square.png',
 			'circle':'circle.png',
-			'path':'polygon.png',
+			'ellipse':'ellipse.png',
+			'fh_ellipse':'freehand-circle.png',
+			'path':'path.png',
 			'text':'text.png',
 			'image':'image.png',
 			'zoom':'zoom.png',
 			
 			'clone':'clone.png',
 			'delete':'delete.png',
+			'group':'shape_group.png',
+			'ungroup':'shape_ungroup.png',
+			'move_top':'move_top.png',
+			'move_bottom':'move_bottom.png',
 
-			'arrow_right':'flyouth.png'
+			'go_up':'go-up.png',
+			'go_down':'go-down.png',
+
+			'arrow_right':'flyouth.png',
+			'arrow_down':'dropdown.gif'
 		},
 		placement: {
 			'#tool_clear,#layer_new':'new_image',
@@ -116,8 +155,12 @@ $(function() {
 			'#tool_select':'select',
 			'#tool_fhpath':'pencil',
 			'#tool_line':'pen',
-			'#tools_ellipse_show':'circle',
-			'#tools_rect_show':'square',
+			'#tool_square,#tools_rect_show':'square',
+			'#tool_rect':'rect',
+			'#tool_fhrect':'fh_rect',
+			'#tool_circle,#tools_ellipse_show':'circle',
+			'#tool_ellipse':'ellipse',
+			'#tool_fhellipse':'fh_ellipse',
 			'#tool_path':'path',
 			'#tool_text,#layer_rename':'text',
 			'#tool_image':'image',
@@ -127,6 +170,8 @@ $(function() {
 			'#layer_delete,#tool_delete,#tool_delete_multi,#tool_node_delete':'delete',
 			'#tool_move_top':'move_top',
 			'#tool_move_bottom':'move_bottom',
+			'#tool_group':'group',
+			'#tool_ungroup':'ungroup',
 			
 			'#layer_up':'go_up',
 			'#layer_down':'go_down',
@@ -141,23 +186,108 @@ $(function() {
 		}
 	});
 	
+	
+	/* Unchanged, just here because they're private methods */
+	var flyoutspeed = 1250;
+	var toolButtonClick = function(button, fadeFlyouts) {
+		if ($(button).hasClass('tool_button_disabled')) return false;
+		var fadeFlyouts = fadeFlyouts || 'normal';
+		$('.tools_flyout').fadeOut(fadeFlyouts);
+		$('#styleoverrides').text('');
+		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
+		$(button).addClass('tool_button_current');
+		// when a tool is selected, we should deselect any currently selected elements
+		svgCanvas.clearSelection();
+		return true;
+	};
+	
+	// New function to add
+	var setIcon = function(holder_sel, id) {
+		var icon = $.getSvgIcon(id).clone();
+		var holder = $(holder_sel);
+		icon[0].setAttribute('width',holder.width());
+		icon[0].setAttribute('height',holder.height());
+		holder.empty().append(icon);
+	}
+	
+	// Change in last line of each of these.
+	var clickSquare = function(){
+		if (toolButtonClick('#tools_rect_show', flyoutspeed)) {
+			flyoutspeed = 'normal';
+			svgCanvas.setMode('square');
+		}
+		setIcon('#tools_rect_show','square');
+	};
+	
+	var clickRect = function(){
+		if (toolButtonClick('#tools_rect_show')) {
+			svgCanvas.setMode('rect');
+		}
+		setIcon('#tools_rect_show','rect');
+	};
+	
+	var clickFHRect = function(){
+		if (toolButtonClick('#tools_rect_show')) {
+			svgCanvas.setMode('fhrect');
+		}
+		setIcon('#tools_rect_show','fh_rect');
+	};
+	
+	var clickCircle = function(){
+		if (toolButtonClick('#tools_ellipse_show', flyoutspeed)) {
+			flyoutspeed = 'normal';
+			svgCanvas.setMode('circle');
+		}
+		setIcon('#tools_ellipse_show','circle');
+	};
+
+	var clickEllipse = function(){
+		if (toolButtonClick('#tools_ellipse_show')) {
+			svgCanvas.setMode('ellipse');
+		}
+		setIcon('#tools_ellipse_show','ellipse');
+	};
+
+	var clickFHEllipse = function(){
+		if (toolButtonClick('#tools_ellipse_show')) {
+			svgCanvas.setMode('fhellipse');
+		}
+		setIcon('#tools_ellipse_show','fh_ellipse');
+	};
+
+	// Bind replacements (no need to move over)
+	$('#tool_square').unbind('mouseup').mouseup(clickSquare);
+	$('#tool_rect').unbind('mouseup').mouseup(clickRect);
+	$('#tool_fhrect').unbind('mouseup').mouseup(clickFHRect);
+	$('#tool_circle').unbind('mouseup').mouseup(clickCircle);
+	$('#tool_ellipse').unbind('mouseup').mouseup(clickEllipse);
+	$('#tool_fhellipse').unbind('mouseup').mouseup(clickFHEllipse);
+	
+	// This should only occur on docprops "OK", not immediately
 	$('#iconsize').change(function() {
 		var size = this.value;
-		var icon_sizes = { s:16, m:24, xl:48	};
+		var icon_sizes = { s:16, m:24, l:32, xl:48 };
 		
 		// Change icon size
-		$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled')
+		$('.tool_button, .push_button, .tool_button_current, .tool_button_disabled, .tool_flyout_button')
 		.find('.svg_icon').each(function() {
 			this.setAttribute('width',icon_sizes[size]);
 			this.setAttribute('height',icon_sizes[size]);
 		});
 		
+		$('.flyout_arrow_horiz .svg_icon').each(function() {
+			this.setAttribute('width',icon_sizes[size]/3);
+			this.setAttribute('height',icon_sizes[size]/3);
+		});
+		
 		// Note that all rules will be prefixed with '#svg_editor' when parsed
 		var cssResizeRules = {
 			".tool_button,\
 			.push_button,\
 			.tool_button_current,\
-			.tool_button_disabled": {
+			.tool_button_disabled,\
+			#tools_rect .tool_flyout_button,\
+			#tools_ellipse .tool_flyout_button": {
 				'width': {s: '16px', l: '32px', xl: '48px'},
 				'height': {s: '16px', l: '32px', xl: '48px'},
 				'padding': {s: '1px', l: '2px', xl: '3px'}
@@ -171,25 +301,30 @@ $(function() {
 			},
 			"div#workarea": {
 				'left': {s: '27px', l: '46px', xl: '65px'},
-				'top': {s: '50px', l: '88px', xl: '125px'}
+				'top': {s: '50px', l: '88px', xl: '125px'},
+				'bottom': {s: '50px', l: '60px', xl: '65px'}
 			},
 			"#tools_bottom": {
-				'left': {s: '50px', l: '57.5', xl: '65px'}
+				'left': {s: '50px', l: '57.5', xl: '65px'},
+				'height': {s: '50px', l: '57.5', xl: '65px'}
 			},
-			"#tools_top input": {
+			"#tools_top input, #tools_bottom input": {
 				'margin-top': {s: '2px', l: '4px', xl: '5px'},
 				'height': {s: '12px', l: '29px', xl: '45px'},
 				'border': {s: '1px solid #555', l: 'auto', xl: 'auto'},
 				'font-size': {s: '.9em', l: '1.7em', xl: '2.5em'}
 			},
+			"#tools_bottom input": {
+				'margin-top': {s: '6px', l: '4px', xl: '5px'},
+			},
 			"#tools_top > div, #tools_top": {
 				'line-height': {s: '17px', l: '34px', xl: '50px'}
 			}, 
-			"#tools_top .dropdown button": {
-				'margin-top': {s: '2px', l: '3px', xl: '4px'},
+			".dropdown button": {
+// 				'margin-top': {s: '2px', l: '3px', xl: '4px'},
 				'height': {s: '18px', l: '34px', xl: '50px'}
 			},
-			"#tools_top label": {
+			"#tools_top label, #tools_bottom label": {
 				'font-size': {s: '1em', l: '1.5em', xl: '2em'},
 				'margin-top': {s: '1px', l: '3px', xl: '5px'}
 			}, 
@@ -197,8 +332,14 @@ $(function() {
 				'font-size': {s: '1.5em', l: '3em', xl: '4.5em'}
 			},
 			"#sidepanels": {
-				'top': {s: '50px', l: '88px', xl: '125px'}
+				'top': {s: '50px', l: '88px', xl: '125px'},
+				'bottom': {s: '50px', l: '88px', xl: '125px'},
+			},
+			".flyout_arrow_horiz": {
+				'left': {s: '-5px', l: '5px', xl: '14px'},
+				'top': {s: '-13px', l: '-13px', xl: '-20px'}
 			}
+
 		};
 		
 		var rule_elem = $('#tool_size_rules');
@@ -219,9 +360,18 @@ $(function() {
 				style_str += '}';
 			});
 			rule_elem.text(style_str);
-			console.log(rule_elem.html());
 		}
+		
+		var pos = $('#tools_rect_show').offset();
+		$('#tools_rect').css({'left': pos.left, 'top': pos.top});
+		pos = $('#tools_ellipse_show').offset();
+		$('#tools_ellipse').css({'left': pos.left, 'top': pos.top});
 	});
+	
+	// For quick testing
+// 	window.setTimeout(function() {
+// 		$('#iconsize').val('s').change();
+// 	},1000);
 });
 </script>
 
@@ -340,7 +490,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 		<div class="push_button" id="tool_clone_multi" title="Clone Elements [C]"></div>
 		<div class="push_button" id="tool_delete_multi" title="Delete Selected Elements [Delete/Backspace]"></div>
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
-		<img class="push_button" id="tool_group" src="images/shape_group.png" title="Group Elements [G]" alt="Group"/>
+		<div class="push_button" id="tool_group" title="Group Elements [G]"></div>
 		<div class="push_button" id="tool_alignleft" title="Align Left"></div>
 		<div class="push_button" id="tool_aligncenter" title="Align Center"></div>
 		<div class="push_button" id="tool_alignright" title="Align Right"></div>
@@ -360,7 +510,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 
 	<div id="g_panel">
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
-		<img class="push_button" id="tool_ungroup" src="images/shape_ungroup.png" title="Ungroup Elements [G]" alt="Ungroup"/>
+		<div class="push_button" id="tool_ungroup" title="Ungroup Elements [G]"></div>
 	</div>
 
 	<div id="rect_panel">