diff --git a/examples/data/dot.png b/examples/data/dot.png
new file mode 100644
index 0000000000..d533783017
Binary files /dev/null and b/examples/data/dot.png differ
diff --git a/examples/icon-color.css b/examples/icon-color.css
new file mode 100644
index 0000000000..f25b6b7d33
--- /dev/null
+++ b/examples/icon-color.css
@@ -0,0 +1,3 @@
+#map {
+  position: relative;
+}
diff --git a/examples/icon-color.html b/examples/icon-color.html
new file mode 100644
index 0000000000..cfa6e4e213
--- /dev/null
+++ b/examples/icon-color.html
@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Icon Colors
+shortdesc: Example assigning a custom color to an icon
+docs: >
+  Example assigning a custom color to an icon. The features in this examples are all using the same image with the different colors coming from the javascript file
+tags: "vector, style, icon, marker"
+resources:
+---
+<div id="map" class="map"></div>
diff --git a/examples/icon-color.js b/examples/icon-color.js
new file mode 100644
index 0000000000..f8b4f88fa1
--- /dev/null
+++ b/examples/icon-color.js
@@ -0,0 +1,71 @@
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.geom.Point');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.proj');
+goog.require('ol.source.TileJSON');
+goog.require('ol.source.Vector');
+goog.require('ol.style.Icon');
+goog.require('ol.style.Style');
+
+
+var rome = new ol.Feature({
+  geometry: new ol.geom.Point(ol.proj.fromLonLat([12.5, 41.9]))
+});
+
+var london = new ol.Feature({
+  geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.12755, 51.507222]))
+});
+
+var madrid = new ol.Feature({
+  geometry: new ol.geom.Point(ol.proj.fromLonLat([-3.683333, 40.4]))
+});
+
+rome.setStyle(new ol.style.Style({
+  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+    color: '#8959A8',
+    src: 'data/dot.png'
+  }))
+}));
+
+london.setStyle(new ol.style.Style({
+  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+    color: '#4271AE',
+    src: 'data/dot.png'
+  }))
+}));
+
+madrid.setStyle(new ol.style.Style({
+  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+    color: [113, 140, 0],
+    src: 'data/dot.png'
+  }))
+}));
+
+
+var vectorSource = new ol.source.Vector({
+  features: [rome, london, madrid]
+});
+
+var vectorLayer = new ol.layer.Vector({
+  source: vectorSource
+});
+
+var rasterLayer = new ol.layer.Tile({
+  source: new ol.source.TileJSON({
+    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
+    crossOrigin: ''
+  })
+});
+
+var map = new ol.Map({
+  renderer: common.getRendererFromQueryString(),
+  layers: [rasterLayer, vectorLayer],
+  target: document.getElementById('map'),
+  view: new ol.View({
+    center: ol.proj.fromLonLat([2.896372, 44.60240]),
+    zoom: 3
+  })
+});