I'm using the following code which defines a default style, that is used to style point (and other) features in OpenLayers 3. When I use the var image to style my features everything is Ok, and the points are rendered on my map. When I try to use var icon with the same dataset instead, nothing is displayed. In my browsers devtools I see, that the icon is loaded?

Any ideas? where the mistake lies?

// -------- Defining default style settings ----------
 var fill = new ol.style.Fill({
   color: 'rgba(255,255,255,0.4)'
 var stroke = new ol.style.Stroke({
   color: '#3399CC',
   width: 1.25

 var image = new ol.style.Circle({
       fill: fill,
       stroke: stroke,
       radius: 5

 var icon = new ol.style.Icon({
          anchor: [0.5, 0.5],
          size: [52, 52],
          offset: [52, 0],
          opacity: 0.5,
          scale: 1.0,
          src: "./img/mmOrange.png"

 var style = new ol.style.Style({
     image: image,  // this works, but when I use image: icon, nothing is displayed
     fill: fill,
     stroke: stroke

2 Answers 2


I think you can try to make sure the src of image is right: just try ol.style.Icon({ src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png' })); to see if something displays.

  • Hi, I've tried it also with the new source. I can see in Firefox-dev-tools, that the icon is loaded, but it does not show up on the map? I reduced my code to the absolute minimum, but I don't get icons displayed. When using the image style everything works fine. I've tested in Firefox, Chrome and Safari. ???
    – geom
    Commented Jan 25, 2017 at 18:13
  • Have you tried ol.style.Style without parameters 'fill/stroke' ?: var style = new ol.style.Style({ image: new ol.style.Icon ({ src: 'openlayers.org/en/v3.20.1/examples/data/icon.png' }); });
    – cheesewind
    Commented Jan 26, 2017 at 9:27
  • Yes I did, see the code below.
    – geom
    Commented Jan 27, 2017 at 19:17
  • In your code below, why you add offset: [52, 0] ? while the size of icon.png is only 32x48 pixel. Using just 'src' as parameter.
    – cheesewind
    Commented Jan 30, 2017 at 10:32
  • Oh, You're right! I should have read the documentation better to understand the consequences of anchor, size and offset. After all it works. thanks a lot!
    – geom
    Commented Jan 30, 2017 at 21:59

For me 'color' did the trick

style: new Style({
    image: new Icon({
            color: 'white',
            scale: 0.2,
            crossOrigin: 'anonymous',
            src: 'assets/img/'+ layerName +'.svg'

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.