##  symbol  â

A ` symbol ` style layer renders icon and text labels at points or along lines
on a map. You can use a symbol layer to configure the visual appearance of
labels for features in vector tiles.

This [ map of Denver area businesses
](https://docs.mapbox.com/help/troubleshooting/using-recolorable-images-in-
mapbox-maps/#mapbox-gl-js) uses the [ ` icon-image ` ](/style-
spec/reference/layers/#layout-symbol-icon-image) layout property to use a
custom image as an icon in a symbol layer.

###  icon-allow-overlap  â

[ Layout ](/style-spec/reference/layers/#layout-property) property.  Optional
[ boolean ](/style-spec/reference/types/#boolean) .  Defaults to ` false ` .
_Requires_ icon-image  .

If true, the icon will be visible even if it collides with other previously
drawn symbols.

SDK Support  |  Mapbox GL JS  |  Android SDK  |  iOS SDK   
---|---|---|---  
basic functionality  |  >= 0.10.0  |  >= 2.0.1  |  >= 2.0.0   
  
###  icon-anchor  â

[ Layout ](/style-spec/reference/layers/#layout-property) property.  Optional
[ enum ](/style-spec/reference/types/#enum) .  One of  ` "center" ` , ` "left"
` , ` "right" ` , ` "top" ` , ` "bottom" ` , ` "top-left" ` , ` "top-right" `
, ` "bottom-left" ` , ` "bottom-right" ` .  Defaults to ` "center" ` .
_Requires_ icon-image  .

Part of the icon placed closest to the anchor.

` "center" ` :

    

The center of the icon is placed closest to the anchor.

` "left" ` :

    

The left side of the icon is placed closest to the anchor.

` "right" ` :

    

The right side of the icon is placed closest to the anchor.

` "top" ` :

    

The top of the icon is placed closest to the anchor.

` "bottom" ` :

    

The bottom of the icon is placed closest to the anchor.

` "top-left" ` :

    

The top left corner of the icon is placed closest to the anchor.

` "top-right" ` :

    

The top right corner of the icon is placed closest to the anchor.

` "bottom-left" ` :

    

The bottom left corner of the icon is placed closest to the anchor.

` "bottom-right" ` :

    

The bottom right corner of the icon is placed closest to the anchor.

SDK Support  |  Mapbox GL JS  |  Android SDK  |  iOS SDK   
---|---|---|---  
basic functionality  |  >= 0.40.0  |  >= 5.2.0  |  >= 3.7.0   
data-driven styling  |  >= 0.40.0  |  >= 5.2.0  |  >= 3.7.0   
  
###  icon-color  â

[ Paint ](/style-spec/reference/layers/#paint-property) property.  Optional  [
color ](/style-spec/reference/types/#color) .  Defaults to ` "#000000" ` .
_Requires_ icon-image  .  Supports  _[ combine  ` feature-state ` ](/style-
spec/reference/expressions/#feature-state) _ and [ smooth-ramp  ` interpolate
` ](/style-spec/reference/expressions/#interpolate) expressions.  opacity
Transitionable.

The color of the icon. This can only be used with [ SDF icons
](/help/troubleshooting/using-recolorable-images-in-mapbox-maps/) .

SDK Support  |  Mapbox GL JS  |  Android SDK  |  iOS SDK   
---|---|---|---  
basic functionality  |  >= 0.10.0  |  >= 2.0.1  |  >= 2.0.0   
data-driven styling  |  >= 0.33.0  |  >= 5.0.0  |  >= 3.5.0   
  
###  icon-color-saturation  â

[ Paint ](/style-spec/reference/layers/#paint-property) property.  Optional  [
number ](/style-spec/reference/types/#number) between ` 0 ` and ` 1 `
inclusive  .  Units in  intensity  .  Defaults to ` 1 ` .  opacity
Transitionable.

Controls saturation level of the symbol icon. With the default value of 1 the
icon color is preserved while with a value of 0 it is fully desaturated and
looks black and white.

SDK Support  |  Mapbox GL JS  |  Android SDK  |  iOS SDK   
---|---|---|---  
basic functionality  |  >= 3.1.0  |  >= 11.1.0  |  >= 11.1.0   
  
###  icon-emissive-strength  â

[ Paint ](/style-spec/reference/layers/#paint-property) property.  Optional  [
number ](/style-spec/reference/types/#number) greater than or equal to ` 0 ` .
Units in  intensity  .  Defaults to ` 1 ` .  _Requires_ lights  .  Supports  [
smooth-ramp  ` interpolate ` ](/style-spec/reference