diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css
index b041dcf4..d0204bbf 100644
--- a/build/css/ox.ui.css
+++ b/build/css/ox.ui.css
@@ -668,6 +668,31 @@ Lists
     position: absolute;
 }
 
+.OxIconList .OxPage {
+    margin: 4px;
+}
+
+.OxIconList .OxItem {
+    float: left;
+}
+
+.OxIconList .OxItem > div {
+    position: relative;
+}
+
+.OxIconList .OxItem > .OxIcon > img {
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: auto;
+}
+
+.OxIconList .OxItem > .OxText > div {
+    font-size: 9px;
+    font-weight: bold;
+    text-align: center;
+}
+
 .OxTextList .OxCell {
     float: left;
     height: 12px;
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index c5bca04e..afec0d67 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -5633,7 +5633,8 @@ requires
                 rowLength: 1,
                 size: 128,
                 type: 'icon',            
-            }, self)
+            }/*, self*/)
+            .addClass('OxIconList')
             .click(click)
             .dblclick(dblclick)
             .scroll(scroll);
@@ -5678,8 +5679,10 @@ requires
                 })
                 .options(options || {});
 
+        Ox.print('IconItem', options);
+
         $.extend(self, {
-            height: self.options.size * 1.5,
+            height: self.options.size * 1.5,            
             url: oxui.path + '/png/ox.ui.' + Ox.theme() + '/icon.png',
             width: self.options.size + 4
         });
@@ -5697,11 +5700,11 @@ requires
             });
         that.$iconImage = $('<img>')
             .attr({
-                src: self.url
+                src: self.options.url
             })
             .css({
-                width: iconWidth + 'px',
-                height: iconHeight + 'px'
+                //width: self.options.size + 'px',
+                //height: self.options.size + 'px'
             })
             .mouseenter(mouseenter)
             .mouseleave(mouseleave)
@@ -5731,7 +5734,7 @@ requires
         that.$reflectionImage = $('<img>')
             .addClass('OxReflection')
             .attr({
-                src: self.url
+                src: /*self.url*/self.options.url
             })
             .css({
                 width: self.options.width + 'px',
@@ -5786,6 +5789,7 @@ requires
                     itemWidth: 16,
                     keys: [],
                     orientation: 'vertical',
+                    pageLength: 100,
                     request: function() {}, // {sort:, range:, callback:}, without parameter returns {items, size etc.}
                     rowLength: 1,
                     sort: [],
@@ -5799,6 +5803,7 @@ requires
         $.extend(self, {
             $items: [],
             $pages: [],
+            clickTimeout: 0,
             ids: {},
             keyboardEvents: {
                 key_alt_control_a: invertSelection,
@@ -5812,7 +5817,6 @@ requires
                 key_space: preview
             },
             page: 0,
-            pageLength: 100,
             preview: false,
             requests: [],
             selected: []
@@ -5902,20 +5906,42 @@ requires
         }
 
         function click(e) {
-            var $element = $(e.target), pos;
+            Ox.print('click')
+            var $item = findItem(e),
+                pos,
+                deselectTimeout = false;
+                selectTimeout = false;
             that.gainFocus();
-            while (!$element.hasClass('OxItem') && !$element.hasClass('OxPage')) {
-                $element = $element.parent();
-            }
-            if ($element.hasClass('OxItem')) {
-                Ox.print($element.attr('id'), $element.data('position'));
-                pos = $element.data('position');
-                if (e.shiftKey) {
-                    addAllToSelection(pos);
-                } else if (e.metaKey) {
-                    toggleSelection(pos);
+            if ($item) {
+                if (!self.clickTimeout) {
+                    // click
+                    pos = $item.data('position');
+                    if (e.metaKey) {
+                        if (!isSelected(pos)) {
+                            addToSelection(pos);
+                        } else {
+                            deselectTimeout = true;
+                        }
+                    } else if (e.shiftKey) {
+                        addAllToSelection(pos);
+                    } else if (!isSelected(pos)) {
+                        select(pos);
+                    } else {
+                        selectTimeout = true;
+                    }
+                    self.clickTimeout = setTimeout(function() {
+                        self.clickTimeout = 0;
+                        if (deselectTimeout) {
+                            deselect(pos);
+                        } else if (selectTimeout) {
+                            select(pos);
+                        }
+                    }, 250);
                 } else {
-                    select(pos);
+                    // dblclick
+                    clearTimeout(self.clickTimeout);
+                    self.clickTimeout = 0;
+                    open();
                 }
             } else {
                 selectNone();
@@ -5932,6 +5958,18 @@ requires
             }
         }
 
+        function findItem(e) {
+            var $element = $(e.target),
+                $item = null;
+            while (!$element.hasClass('OxItem') && !$element.hasClass('OxPage') && !$element.is('body')) {
+                $element = $element.parent();
+            }
+            if ($element.hasClass('OxItem')) {
+                $item = $element;
+            }
+            return $item;
+        }
+
         function getHeight() {
             return that.height() - (that.$content.width() > that.width() ? oxui.scrollbarSize : 0);
         }
@@ -6029,9 +6067,9 @@ requires
             }
             var keys = $.inArray('id', self.options.keys) > -1 ? self.options.keys :
                         $.merge(self.options.keys, ['id']),
-                offset = page * self.pageLength,
+                offset = page * self.options.pageLength,
                 range = [offset, offset + (page < self.pages - 1 ?
-                        self.pageLength : self.listLength % self.pageLength)];
+                        self.options.pageLength : self.listLength % self.options.pageLength)];
             if (Ox.isUndefined(self.$pages[page])) {
                 self.requests.push(self.options.request({
                     callback: function(result) {
@@ -6281,11 +6319,11 @@ requires
                     $.extend(self, {
                         listHeight: result.data.items * self.options.itemHeight, // fixme: should be listSize
                         listLength: result.data.items,
-                        pages: Math.ceil(result.data.items / self.pageLength),
+                        pages: Math.ceil(result.data.items / self.options.pageLength),
                         pageWidth: self.options.orientation == 'horizontal' ?
-                                self.pageLength * self.options.itemWidth : 0,
+                                self.options.pageLength * self.options.itemWidth : 0,
                         pageHeight: self.options.orientation == 'horizontal' ? 0 :
-                                self.pageLength * self.options.itemHeight / self.options.rowLength
+                                self.options.pageLength * self.options.itemHeight / self.options.rowLength
                     });
                     that.$content.css({
                         height: self.listHeight + 'px'
@@ -6413,7 +6451,7 @@ requires
             })
         });
         $.extend(self, {
-            pageHeight: self.pageLength * self.itemHeight
+            pageHeight: self.options.pageLength * self.itemHeight
         });
 
         // Head