diff --git a/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.css b/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.css
new file mode 100644
index 00000000..6918d98f
--- /dev/null
+++ b/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.css
@@ -0,0 +1,60 @@
+.InputfieldIconAll { 
+	overflow: visible !important; 
+	margin-top: 12px; 
+	text-align: justify; 
+}
+.InputfieldIconAll .fa.fw { 
+	padding: 7px 6px; 
+	font-size: 16px !important; 
+	transition: all 0.16s; 
+	min-width: 34px; 
+	text-align: center; 
+	backface-visibility: hidden; 
+	background: white; 
+}
+.fa.fw:hover { 
+	background: #E2E9EF; 
+	cursor: pointer;
+	border-radius: 3px; 
+}
+.fa.fw.on { 
+	background: #d52978; 
+	color: white; 
+	border-radius: 3px; 
+}
+.fa.fw:active { 
+	animation: 0.16s zoomIcon 0.3s forwards; 
+	z-index: 200; 
+}
+.fa.fw::after { 
+	content: attr(title); 
+	color: inherit; 
+	position: absolute; 
+	top: 100%; 
+	margin-top: -3px; 
+	font-size: 4px; 
+	letter-spacing: 0; 
+	left: 0; 
+	right: 0; 
+	padding-bottom: 2px; 
+	backface-visibility: hidden; 
+	opacity: 0; 
+	transition: opacity 0.4s cubic-bezier(0.895, 0.030, 0.685, 0.220); 
+}
+.fa.fw:active::after { 
+	background: #E2E9EF; 
+	opacity: 1; 
+	pointer-events: none; 
+}
+
+@keyframes zoomIcon {
+	0% {
+		transform: scale(1);
+	}
+	100% {
+		transform: scale(4);
+		color: inherit;
+		background: #E2E9EF;
+		pointer-events: none;
+	}
+}
diff --git a/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.js b/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.js
index 9180642a..8c83cc03 100644
--- a/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.js
+++ b/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.js
@@ -1,81 +1,74 @@
-
-$(document).ready(function() {
+function InputfieldIcon() {
 	
-	$(".InputfieldIcon select").change(function() {
-		
-		var $select = $(this); 
+	$('.InputfieldIcon select').change(function() {
+		var $select = $(this);
 		var val = $select.val();
-	
 		if(val.length > 0) {
-			$select.closest(".InputfieldIcon").find(".InputfieldHeader > i.fa:first-child")
-				.attr('class', 'fa ' + val) 
+			$select.closest('.InputfieldIcon').find('.InputfieldHeader > i.fa:first-child')
+				.attr('class', 'fa fa-fw ' + val)
 				.parent().effect('highlight', 500);
-			var $all = $select.siblings(".InputfieldIconAll");
-			if($all.is(":visible")) {
-				$all.find('.on').removeClass('on').mouseout();
-				var $icon = $all.find("." + val).parent('span');
-				if(!$icon.hasClass('on')) $icon.addClass('on').mouseover();
+			var $all = $select.siblings('.InputfieldIconAll');
+			if($all.is(':visible')) {
+				$all.find('.on').removeClass('on');
+				$all.find('.' + val).addClass('on');
 			}
 		}
-		
-		$select.removeClass('on'); 
+		$select.removeClass('on');
 	});
-	
-	$(".InputfieldIconAll").hide();
-	
-	$("a.InputfieldIconShowAll").click(function() {
-	
-		var $link = $(this);
-		var $all = $link.siblings(".InputfieldIconAll");
-		var $select = $link.siblings("select"); 
+
+	$('.InputfieldIconAll').hide();
+
+	$('a.InputfieldIconShowAll').on('click', function() {
+
+		var $a = $(this);
+		var $ai = $a.prev('i');
+		var $all = $a.siblings('.InputfieldIconAll');
+		var $select = $a.siblings("select");
 		
+		$ai.toggleClass('fa-angle-down fa-angle-right');
+
 		if($all.is(":visible")) {
-			$all.slideUp('fast', function() {
-				$all.html(''); 
-			}); 
+			$all.hide();
 			return false;
 		}
-		
-		$select.children("option").each(function() {
-			var val = $(this).attr('value'); 
+
+		$all.show();
+
+		if($all.hasClass('initialized')) return false;
+
+		$all.addClass('initialized');
+
+		$select.children('option').each(function() {
+			var val = $(this).val();
 			if(val.length == 0) return;
-			var $icon = $("<i class='fa fa-fw'></i>")
-				.addClass(val)
-				.attr('data-name', val)
-				.css('cursor', 'pointer')
-				.attr('title', val); 
-			var $span = $("<span />")
-				.css('padding', '2px 2px 2px 2px')
-				.css('margin-right', '10px')
-				.css('line-height', '30px')
-				.append($icon);
-			$all.append($span); 
-		}); 
-		
-		$all.slideDown('fast', function() {
-			
-			$all.on('click', 'span', function() {
-				$all.find('.on').removeClass('on').mouseout();
-				$(this).addClass('on').mouseover();
-				if(!$select.hasClass('on')) $select.val($(this).find('i.fa').attr('data-name')).change();
+			$all.append("<i class='fa fw " + val + "' title='" + val + "'>");
+		});
 
-			});
-			$all.on('mouseover', 'span', function() {
-				$(this).css('background-color', 'red').css('color','white'); 
-			});
-			$all.on('mouseout', 'span', function() {
-				if(!$(this).hasClass('on')) {
-					$(this).css('background-color', 'inherit').css('color', 'inherit'); 
-				}
-			});
+		$all.on('click', 'i', function() {
+			var $i = $(this);
+			if($i.hasClass('on')) {
+				$i.removeClass('on');
+				$select.val('').change();
+				return;
+			}
+			$all.find('.on').removeClass('on');
+			$i.addClass('on');
+			if(!$select.hasClass('on')) {
+				$select.val($i.attr('title')).change();
+			}
+		});
+
+		var val = $select.val();
+		if(val.length > 0) {
+			$all.find('.' + val).addClass('on');
+		}
 
-			var val = $select.val();	
-			if(val.length > 0) $all.find("." + val).each(function() {
-				$(this).parent('span').addClass('on').mouseover();
-			}); 
-		}); 
-	
 		return false;
-	}); 
-	
-});
\ No newline at end of file
+	});
+
+}
+
+$(document).ready(function() {
+	InputfieldIcon();
+});
+
diff --git a/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.min.js b/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.min.js
index a37367c4..0cebb031 100644
--- a/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.min.js
+++ b/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.min.js
@@ -1 +1 @@
-$(document).ready(function(){$(".InputfieldIcon select").change(function(){var b=$(this);var d=b.val();if(d.length>0){b.closest(".InputfieldIcon").find(".InputfieldHeader > i.fa:first-child").attr("class","fa "+d).parent().effect("highlight",500);var c=b.siblings(".InputfieldIconAll");if(c.is(":visible")){c.find(".on").removeClass("on").mouseout();var a=c.find("."+d).parent("span");if(!a.hasClass("on")){a.addClass("on").mouseover()}}}b.removeClass("on")});$(".InputfieldIconAll").hide();$("a.InputfieldIconShowAll").click(function(){var a=$(this);var c=a.siblings(".InputfieldIconAll");var b=a.siblings("select");if(c.is(":visible")){c.slideUp("fast",function(){c.html("")});return false}b.children("option").each(function(){var f=$(this).attr("value");if(f.length==0){return}var e=$("<i class='fa fa-fw'></i>").addClass(f).attr("data-name",f).css("cursor","pointer").attr("title",f);var d=$("<span />").css("padding","2px 2px 2px 2px").css("margin-right","10px").css("line-height","30px").append(e);c.append(d)});c.slideDown("fast",function(){c.on("click","span",function(){c.find(".on").removeClass("on").mouseout();$(this).addClass("on").mouseover();if(!b.hasClass("on")){b.val($(this).find("i.fa").attr("data-name")).change()}});c.on("mouseover","span",function(){$(this).css("background-color","red").css("color","white")});c.on("mouseout","span",function(){if(!$(this).hasClass("on")){$(this).css("background-color","inherit").css("color","inherit")}});var d=b.val();if(d.length>0){c.find("."+d).each(function(){$(this).parent("span").addClass("on").mouseover()})}});return false})});
\ No newline at end of file
+function InputfieldIcon(){$(".InputfieldIcon select").change(function(){var $select=$(this);var val=$select.val();if(val.length>0){$select.closest(".InputfieldIcon").find(".InputfieldHeader > i.fa:first-child").attr("class","fa fa-fw "+val).parent().effect("highlight",500);var $all=$select.siblings(".InputfieldIconAll");if($all.is(":visible")){$all.find(".on").removeClass("on");$all.find("."+val).addClass("on")}}$select.removeClass("on")});$(".InputfieldIconAll").hide();$("a.InputfieldIconShowAll").on("click",function(){var $a=$(this);var $ai=$a.prev("i");var $all=$a.siblings(".InputfieldIconAll");var $select=$a.siblings("select");$ai.toggleClass("fa-angle-down fa-angle-right");if($all.is(":visible")){$all.hide();return false}$all.show();if($all.hasClass("initialized"))return false;$all.addClass("initialized");$select.children("option").each(function(){var val=$(this).val();if(val.length==0)return;$all.append("<i class='fa fw "+val+"' title='"+val+"'>")});$all.on("click","i",function(){var $i=$(this);if($i.hasClass("on")){$i.removeClass("on");$select.val("").change();return}$all.find(".on").removeClass("on");$i.addClass("on");if(!$select.hasClass("on")){$select.val($i.attr("title")).change()}});var val=$select.val();if(val.length>0){$all.find("."+val).addClass("on")}return false})}$(document).ready(function(){InputfieldIcon()});
\ No newline at end of file
diff --git a/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.module b/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.module
index ac92d95f..99580a83 100644
--- a/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.module
+++ b/wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.module
@@ -12,25 +12,39 @@ class InputfieldIcon extends Inputfield {
 		return array(
 			'title' => __('Icon', __FILE__), // Module Title
 			'summary' => __('Select an icon', __FILE__), // Module Summary
-			'version' => 2,
+			'version' => 3,
 		);
 	}
 	
 	const prefix = 'fa-';
 	
 	protected $options = array();
-	
+
+	/**
+	 * Construct
+	 * 
+	 */
 	public function __construct() {
 		parent::__construct();
-		$this->options = file(dirname(__FILE__) . '/icons.inc', FILE_IGNORE_NEW_LINES); 
+		$this->options = file(__DIR__ . '/icons.inc', FILE_IGNORE_NEW_LINES); 
 		$this->set('prefixValue', true); // should value attr always start with prefix? (externally)
 	}
-	
+
+	/**
+	 * Init
+	 * 
+	 */
 	public function init() {
 		parent::init();
 		$this->icon = 'puzzle-piece';
 	}
-	
+
+	/**
+	 * Render
+	 * 
+	 * @return string
+	 * 
+	 */
 	public function ___render() {
 		$out = '';
 		$attrs = $this->getAttributes();
@@ -38,27 +52,35 @@ class InputfieldIcon extends Inputfield {
 		if($value && strpos($value, self::prefix) !== 0) $value = self::prefix . $value;
 		if($value) $this->icon = $value;
 		unset($attrs['value']);
-		$out .= "\n<select " . $this->getAttributesString($attrs) . ">";
-		if(!$this->getSetting('required')) $out .= "\n\t<option value=''></option>";
+		$out .= "<select " . $this->getAttributesString($attrs) . ">";
+		if(!$this->getSetting('required')) $out .= "<option value=''></option>";
 		foreach($this->options as $option) {
 			$option = trim($option); 
 			$selected = $value == $option ? " selected='selected'" : "";
 			$label = ucfirst(substr($option, 3)); 
 			$label = str_replace('-', ' ', $label); 
-			$out .= "\n\t<option$selected value='$option'>$label</option>";
+			$out .= "<option$selected value='$option'>$label</option>";
 		}
-		$out .= "</select>&nbsp;&nbsp;";
+		$out .= "</select>&nbsp;";
 		$out .=
-			"<i class='fa fa-angle-right ui-priority-secondary'></i>&nbsp;" . 
-			"<a class='InputfieldIconShowAll' target='_blank' href='#'>" . 
+			"<i class='fa fa-fw fa-angle-right ui-priority-secondary'></i>" . 
+			"<a class='InputfieldIconShowAll' href='#'>" . 
 			"<small>" . $this->_('Show All Icons') . "</small></a>" . 
 			"<div class='InputfieldIconAll'></div>";
 		return $out;
 
 	}
-	
+
+	/**
+	 * Set attribute
+	 * 
+	 * @param array|string $key
+	 * @param array|bool|int|string $value
+	 * @return Inputfield
+	 * 
+	 */
 	public function setAttribute($key, $value) {
-		if($key == 'value' && !empty($value)) {
+		if($key === 'value' && !empty($value)) {
 			if(strpos($value, self::prefix) !== 0) $value = self::prefix . $value;
 			$index = array_search($value, $this->options);
 			if(is_int($index)) {
@@ -69,9 +91,16 @@ class InputfieldIcon extends Inputfield {
 		}
 		return parent::setAttribute($key, $value); 
 	}
-	
+
+	/**
+	 * Get attribute
+	 * 
+	 * @param string $key
+	 * @return bool|mixed|null|string
+	 * 
+	 */
 	public function getAttribute($key) {
-		if($key == 'value') {
+		if($key === 'value') {
 			$value = parent::getAttribute($key);
 			if(empty($value)) return $value;
 			if($this->getSetting('prefixValue')) {