I'm learning how to create web applications using the ArcGIS API for JavaScript. I have a map that is displaying both an ArcGISDynamicMapServiceLayer (which includes two layers) and a FeatureLayer. I have successfully added a Legend using esri/dijit/legend, and it shows all the information I want. I then added code to my CSS file to further format the legend (to change font/size etc for titles and names). Ex:

.esriLegendLayer {
     font-size: 12px;
     font-family: 'Roboto', serif;

I was also able to successfully change the size of the legend symbols for the ArcGISDynamicMapServiceLayer using the following css code:

.esriLegendLayer img {
    width: 20px;

However, this does NOT effect the legend symbols for the FeatureLayer.

enter image description here

I want the symbols sizes to be the same throughout the legend. In the image above, you can see they are not, because the code is only altering the size for ArcGISDynamicMapServiceLayer symbols (top) but not FeatureLayer symbols (bottom).

I have tried unsuccessfully to find a way to change the symbol size for the FeatureLayer as well. I don't want to change the size of the symbol as displayed on the map, just on the legend, and I want to be able to set the size regardless of the size that was used when the service was created. This is important so we can have a general template that will result in the same general consistant look for the legend regardless of what layers/services are included.

  • Anyone? I still haven't found a solution....
    – Beck
    Commented Jul 11, 2014 at 20:11

3 Answers 3


Sorry for taking so long to respond to this - I forgot all about it!

In the end I discovered too many other limitations with the Dijit Legend widget, so ultimately I created my own, using an ajax call to the legend on the REST endpoint (.../MapServer/legend?f=pjson) to obtain the necessary info, including the symbol, which I was then able to style however I wanted.

It took some learning to create my own widgets, but it's been worth it for the increased freedom it allows me to get it just the way I want it!


Hopefully you've solved your issue by now, if so, please share! Otherwise, seems that some legend symbols (perhaps particularly, feature layers) are not img but rather svg. You can try the following css to resize this:

.esriLegendLayer svg {
  -webkit-transform: scale(2.0);
  -ms-transform: scale(2.0);
  transform: scale(2.0);

Where the 2.0 means double the size.


You may want to try adding the !important tag to your CSS. The API uses a lot of inline styles that will override anything in your stylesheets. The only way to override an inline style is to use the !important tag. For example:

.esriLegendLayer {
     font-size: 12px !important;
     font-family: 'Roboto', serif !important;

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.