> For the complete documentation index, see [llms.txt](https://fatos-doc.fatos.biz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fatos-doc.fatos.biz/fatos-api/map/map-control/layers/style-specification/symbol.md).

# Symbol

An icon or a text label.

#### Paint Property

<table><thead><tr><th width="159">Property Name</th><th width="334.04301075268813">Description</th><th width="150">Type</th><th>Defaults</th></tr></thead><tbody><tr><td>icon-color</td><td>The color of the icon. This can only be used with SDF icons.</td><td>hex values, RGB, RGBA, HSL, HSLA,<br>Colors Name</td><td>#000000</td></tr><tr><td>icon-halo-blur</td><td>Fade out the halo towards the outside.</td><td>number</td><td>0</td></tr><tr><td>icon-halo-color</td><td>The color of the icon. This can only be used with SDF icons.</td><td>hex values, RGB, RGBA, HSL, HSLA,<br>Colors Name</td><td>#000000</td></tr><tr><td>icon-halo-width</td><td>Distance of halo to the icon outline.</td><td>number</td><td>0</td></tr><tr><td>icon-opacity</td><td><p>The opacity at which the icon will be drawn.</p><p><em>Requires</em> : icon-image.<br>between <code>0</code> and <code>1</code> inclusive. </p></td><td>number</td><td>1</td></tr><tr><td>icon-translate</td><td><p>Distance that the icon's anchor is moved from its original placement. Positive values indicate right and down, while negative values indicate left and up.</p><p><em>Requires</em> icon-image. </p></td><td>array of numbers</td><td>[0, 0]</td></tr><tr><td>icon-translate-anchor</td><td><p>Controls the frame of reference for <code>icon-translate</code>.</p><p><code>"map"</code>:</p><p>Icons are translated relative to the map.</p><p><code>"viewport"</code>:</p><p>Icons are translated relative to the viewport.<br><em>Requires</em> : icon-image. <em>Requires</em> : icon-translate.</p></td><td>string</td><td>map</td></tr><tr><td>text-color</td><td><p>The color with which the text will be drawn.</p><p><em>Requires</em> text-field. <br></p></td><td>hex values, RGB, RGBA, HSL, HSLA,<br>Colors Name</td><td>#000000</td></tr><tr><td>text-halo-blur</td><td><p>The halo's fadeout distance towards the outside.</p><p><em>Requires</em> text-field.</p></td><td>number</td><td>0</td></tr><tr><td>text-halo-color</td><td><p>The color of the text's halo, which helps it stand out from backgrounds.</p><p><em>Requires</em> text-field.</p></td><td>hex values, RGB, RGBA, HSL, HSLA,<br>Colors Name</td><td>rgba(0, 0, 0, 0)</td></tr><tr><td>text-halo-width</td><td><p>Distance of halo to the font outline. Max text halo width is 1/4 of the font-size.</p><p><em>Requires</em> text-field. <br></p></td><td>number</td><td>0</td></tr><tr><td>text-opacity</td><td><p>The opacity at which the text will be drawn.</p><p><em>Requires</em> text-field.<br>between <code>0</code> and <code>1</code> inclusive.</p></td><td>number</td><td>1</td></tr><tr><td>text-translate</td><td><p>Distance that the text's anchor is moved from its original placement. Positive values indicate right and down, while negative values indicate left and up.</p><p><em>Requires</em> text-field.</p></td><td>array of numbers</td><td>[0, 0]</td></tr><tr><td>text-translate-anchor</td><td><p>Controls the frame of reference for <code>text-translate</code>.</p><p><code>"map"</code>:</p><p>The text is translated relative to the map.</p><p><code>"viewport"</code>:</p><p>The text is translated relative to the viewport.<br><em>Requires</em> text-field. <br><em>Requires</em> text-translate.</p></td><td>string</td><td>map</td></tr></tbody></table>

#### Layout Property

<table><thead><tr><th>Property Name</th><th width="291">Description</th><th width="150">Type</th><th>Defaults</th></tr></thead><tbody><tr><td>visibility</td><td><p>Whether this layer is displayed.</p><p><code>"visible"</code>:</p><p>The layer is shown.</p><p><code>"none"</code>:</p><p>The layer is not shown.</p></td><td>String( visible or none)</td><td>visible</td></tr><tr><td>icon-allow-overlap</td><td>If true, the icon will be visible even if it collides with other previously drawn symbols.</td><td>boolean</td><td>false</td></tr><tr><td>icon-anchor</td><td><p>Part of the icon placed closest to the anchor.</p><p><code>"center"</code>:</p><p>The center of the icon is placed closest to the anchor.</p><p><code>"left"</code>:</p><p>The left side of the icon is placed closest to the anchor.</p><p><code>"right"</code>:</p><p>The right side of the icon is placed closest to the anchor.</p><p><code>"top"</code>:</p><p>The top of the icon is placed closest to the anchor.</p><p><code>"bottom"</code>:</p><p>The bottom of the icon is placed closest to the anchor.</p><p><code>"top-left"</code>:</p><p>The top left corner of the icon is placed closest to the anchor.</p><p><code>"top-right"</code>:</p><p>The top right corner of the icon is placed closest to the anchor.</p><p><code>"bottom-left"</code>:</p><p>The bottom left corner of the icon is placed closest to the anchor.</p><p><code>"bottom-right"</code>:</p><p>The bottom right corner of the icon is placed closest to the anchor.</p></td><td>string</td><td>center</td></tr><tr><td>icon-ignore-placement</td><td>If true, other symbols can be visible even if they collide with the icon.</td><td>boolean</td><td>false</td></tr><tr><td>icon-image</td><td>Name of image in sprite to use for drawing an image background.</td><td>array of string or string<br>['get', 'imagename'] or 'imagename'</td><td>null</td></tr><tr><td>icon-keep-upright</td><td><p>If true, the icon may be flipped to prevent it from being rendered upside-down.</p><p><em>Requires</em> : icon-image. <br><em>Requires</em>  : icon-rotation-alignment to be <code>"map"</code>. <em>Requires</em> : symbol-placement to be <code>"line"</code>, or <code>"line-center"</code>.</p></td><td>boolean</td><td>false</td></tr><tr><td>icon-offset</td><td>Offset distance of icon from its anchor.</td><td>array of numbers</td><td>[0,0]</td></tr><tr><td>icon-optional</td><td><p>If true, text will display without their corresponding icons when the icon collides with other symbols and the text does not.</p><p><em>Requires :</em> icon-image. <br><em>Requires</em> : text-field.</p></td><td>boolean</td><td>false</td></tr><tr><td>icon-padding</td><td>Size of the additional area around the icon bounding box used for detecting symbol collisions.</td><td>number</td><td>2</td></tr><tr><td>icon-pitch-alignment</td><td><p>Orientation of icon when map is pitched.</p><p><code>"map"</code>:</p><p>The icon is aligned to the plane of the map.</p><p><code>"viewport"</code>:</p><p>The icon is aligned to the plane of the viewport.</p><p><code>"auto"</code>:</p><p>Automatically matches the value of <code>icon-rotation-alignment</code>.<br><em>Requires</em> : icon-image.</p></td><td>string</td><td>auto</td></tr><tr><td>icon-rotate</td><td><p>Rotates the icon clockwise.</p><p><em>Requires</em> : icon-image.<br></p></td><td>number</td><td>0</td></tr><tr><td>icon-rotation-alignment</td><td><p>In combination with <code>symbol-placement</code>, determines the rotation behavior of icons.</p><p><code>"map"</code>:</p><p>When <code>symbol-placement</code> is set to <code>point</code>, aligns icons east-west. When <code>symbol-placement</code> is set to <code>line</code> or <code>line-center</code>, aligns icon x-axes with the line.</p><p><code>"viewport"</code>:</p><p>Produces icons whose x-axes are aligned with the x-axis of the viewport, regardless of the value of <code>symbol-placement</code>.</p><p><code>"auto"</code>:</p><p>When <code>symbol-placement</code> is set to <code>point</code>, this is equivalent to <code>viewport</code>. When <code>symbol-placement</code> is set to <code>line</code> or <code>line-center</code>, this is equivalent to <code>map</code>.</p></td><td>string</td><td>auto</td></tr><tr><td>icon-size</td><td>Scales the original size of the icon by the provided factor. The new pixel size of the image will be the original pixel size multiplied by <code>icon-size</code>. 1 is the original size; 3 triples the size of the image.<br><em>Requires</em> : icon-image.</td><td>number</td><td>1</td></tr><tr><td>icon-text-fit</td><td><p>Scales the icon to fit around the associated text.</p><p><code>"none"</code>:</p><p>The icon is displayed at its intrinsic aspect ratio.</p><p><code>"width"</code>:</p><p>The icon is scaled in the x-dimension to fit the width of the text.</p><p><code>"height"</code>:</p><p>The icon is scaled in the y-dimension to fit the height of the text.</p><p><code>"both"</code>:</p><p>The icon is scaled in both x- and y-dimensions.</p></td><td>string</td><td>none</td></tr><tr><td>icon-text-fit-padding</td><td>Size of the additional area added to dimensions determined by <code>icon-text-fit</code>, in clockwise order: top, right, bottom, left.<br><em>Requires</em> : icon-image. <br><em>Requires</em> : text-field. <br><em>Requires</em> : icon-text-fit </td><td>array of numbers</td><td>[0, 0, 0, 0]</td></tr><tr><td>symbol-avoid-edges</td><td>If true, the symbols will not cross tile edges to avoid mutual collisions.</td><td>boolean</td><td>false</td></tr><tr><td>symbol-placement</td><td><p>Label placement relative to its geometry.</p><p><code>"point"</code>:</p><p>The label is placed at the point where the geometry is located.</p><p><code>"line"</code>:</p><p>The label is placed along the line of the geometry. Can only be used on <code>LineString</code> and <code>Polygon</code> geometries.</p><p><code>"line-center"</code>:</p><p>The label is placed at the center of the line of the geometry. Can only be used on <code>LineString</code> and <code>Polygon</code> geometries. Note that a single feature in a vector tile may contain multiple line geometries.</p></td><td>string</td><td>point</td></tr><tr><td>symbol-spacing</td><td><p>Distance between two symbol anchors.</p><p><em>Requires</em> : symbol-placement to be <code>"line"</code>.<br>greater than or equal to <code>1</code>.</p></td><td>number</td><td>250</td></tr><tr><td>symbol-z-order</td><td><p>Determines whether overlapping symbols in the same layer are rendered in the order that they appear in the data source or by their y-position relative to the viewport.<br><code>"auto"</code>:</p><p>Sorts symbols by <code>symbol-sort-key</code> if set. Otherwise, sorts symbols by their y-position relative to the viewport if <code>icon-allow-overlap</code> or <code>text-allow-overlap</code> is set to <code>true</code> or <code>icon-ignore-placement</code> or <code>text-ignore-placement</code> is <code>false</code>.</p><p><code>"viewport-y"</code>:</p><p>Sorts symbols by their y-position relative to the viewport if <code>icon-allow-overlap</code> or <code>text-allow-overlap</code> is set to <code>true</code> or <code>icon-ignore-placement</code> or <code>text-ignore-placement</code> is <code>false</code>.</p><p><code>"source"</code>:</p><p>Sorts symbols by <code>symbol-sort-key</code> if set. Otherwise, no sorting is applied; symbols are rendered in the same order as the source data.</p></td><td>string</td><td>auto</td></tr><tr><td>text-allow-overlap</td><td><p>If true, the text will be visible even if it collides with other previously drawn symbols.</p><p><em>Requires</em> text-field.</p></td><td>boolean</td><td>false</td></tr><tr><td>text-anchor</td><td><p>Part of the text placed closest to the anchor.</p><p><code>"center"</code>:</p><p>The center of the text is placed closest to the anchor.</p><p><code>"left"</code>:</p><p>The left side of the text is placed closest to the anchor.</p><p><code>"right"</code>:</p><p>The right side of the text is placed closest to the anchor.</p><p><code>"top"</code>:</p><p>The top of the text is placed closest to the anchor.</p><p><code>"bottom"</code>:</p><p>The bottom of the text is placed closest to the anchor.</p><p><code>"top-left"</code>:</p><p>The top left corner of the text is placed closest to the anchor.</p><p><code>"top-right"</code>:</p><p>The top right corner of the text is placed closest to the anchor.</p><p><code>"bottom-left"</code>:</p><p>The bottom left corner of the text is placed closest to the anchor.</p><p><code>"bottom-right"</code>:</p><p>The bottom right corner of the text is placed closest to the anchor.<br><em>Requires</em> text-field. <br><em>Disabled by</em> text-variable-anchor.</p></td><td>string</td><td>center</td></tr><tr><td>text-field</td><td>Value to use for a text label. If a plain <code>string</code> is provided, it will be treated as a <code>formatted</code> with default/inherited formatting options. SDF images are not supported in formatted text and will be ignored.</td><td>array of string or string<br>['get', 'propertyname'] or 'propertyyname'</td><td>''</td></tr><tr><td>text-font</td><td><p>Font stack to use for displaying text.</p><p><em>Requires</em> text-field.<br></p></td><td>array of string</td><td>["Open Sans Regular","Arial Unicode MS Regular"]</td></tr><tr><td>text-ignore-placement</td><td><p>If true, other symbols can be visible even if they collide with the text.</p><p><em>Requires</em> text-field.<br></p></td><td>boolean</td><td>false</td></tr><tr><td>text-justify</td><td><p>Text justification options.</p><p><code>"auto"</code>:</p><p>The text is aligned towards the anchor position.</p><p><code>"left"</code>:</p><p>The text is aligned to the left.</p><p><code>"center"</code>:</p><p>The text is centered.</p><p><code>"right"</code>:</p><p>The text is aligned to the right.<br><em>Requires</em> text-field.</p></td><td>string</td><td>center</td></tr><tr><td>text-keep-upright</td><td><p>If true, the text may be flipped vertically to prevent it from being rendered upside-down.</p><p><em>Requires</em> text-field. <br><em>Requires</em> text-rotation-alignment to be <code>"map"</code>. <em>Requires</em> symbol-placement to be <code>"line"</code>, or <code>"line-center"</code>.</p></td><td>boolean</td><td>true</td></tr><tr><td>text-letter-spacing</td><td><p>Text tracking amount.</p><p><em>Requires</em> text-field.</p></td><td>number</td><td>0</td></tr><tr><td>text-line-height</td><td><p>Text leading value for multi-line text.</p><p><em>Requires</em> text-field.</p></td><td>number</td><td>1.2</td></tr><tr><td>text-max-angle</td><td><p>Maximum angle change between adjacent characters.</p><p><em>Requires</em> text-field. <br><em>Requires</em> symbol-placement to be <code>"line"</code>, or <code>"line-center"</code>.</p></td><td>number</td><td>45</td></tr><tr><td>text-max-width</td><td><p>The maximum line width for text wrapping.</p><p><em>Requires</em> text-field. <br><em>Requires</em> symbol-placement to be <code>"point"</code>.</p></td><td>number</td><td>10</td></tr><tr><td>text-offset</td><td>Offset distance of text from its anchor. Positive values indicate right and down, while negative values indicate left and up.<br><em>Requires</em> text-field. <br><em>Disabled by</em> text-radial-offset.</td><td>array of numbers</td><td>[0,0]</td></tr><tr><td>text-optional</td><td>If true, icons will display without their corresponding text when the text collides with other symbols and the icon does not.<br><em>Requires</em> text-field. <br><em>Requires</em> icon-image.</td><td>boolean</td><td>false</td></tr><tr><td>text-padding</td><td><p>Size of the additional area around the text bounding box used for detecting symbol collisions.</p><p><em>Requires</em> text-field.</p></td><td>number</td><td>2</td></tr><tr><td>text-pitch-alignment</td><td><p>Orientation of text when map is pitched.</p><p><code>"map"</code>:</p><p>The text is aligned to the plane of the map.</p><p><code>"viewport"</code>:</p><p>The text is aligned to the plane of the viewport.</p><p><code>"auto"</code>:</p><p>Automatically matches the value of <code>text-rotation-alignment</code>.</p></td><td>string</td><td>auto</td></tr><tr><td>text-radial-offset</td><td>Radial offset of text, in the direction of the symbol's anchor. Useful in combination with <code>text-variable-anchor</code>, which defaults to using the two-dimensional <code>text-offset</code> if present.<br><em>Requires</em> text-field.</td><td>number</td><td>0</td></tr><tr><td>text-rotate</td><td><p>Rotates the text clockwise.</p><p><em>Requires</em> text-field.</p></td><td>number</td><td>0</td></tr><tr><td>text-rotation-alignment</td><td><p>In combination with <code>symbol-placement</code>, determines the rotation behavior of the individual glyphs forming the text.</p><p><code>"map"</code>:</p><p>When <code>symbol-placement</code> is set to <code>point</code>, aligns text east-west. When <code>symbol-placement</code> is set to <code>line</code> or <code>line-center</code>, aligns text x-axes with the line.</p><p><code>"viewport"</code>:</p><p>Produces glyphs whose x-axes are aligned with the x-axis of the viewport, regardless of the value of <code>symbol-placement</code>.</p><p><code>"auto"</code>:</p><p>When <code>symbol-placement</code> is set to <code>point</code>, this is equivalent to <code>viewport</code>. When <code>symbol-placement</code> is set to <code>line</code> or <code>line-center</code>, this is equivalent to <code>map</code>.<br><em>Requires</em> text-field.</p></td><td>string</td><td>auto</td></tr><tr><td>text-size</td><td>Font size.<br><em>Requires</em> text-field.</td><td>number</td><td>16</td></tr><tr><td>text-transform</td><td><p>Specifies how to capitalize text, similar to the CSS <code>text-transform</code> property.</p><p><code>"none"</code>:</p><p>The text is not altered.</p><p><code>"uppercase"</code>:</p><p>Forces all letters to be displayed in uppercase.</p><p><code>"lowercase"</code>:</p><p>Forces all letters to be displayed in lowercase.<br><em>Requires</em> text-field.</p></td><td>string</td><td>none</td></tr><tr><td>text-writing-mode</td><td><p>The property allows control over a symbol's orientation. Note that the property values act as a hint, so that a symbol whose language doesn’t support the provided orientation will be laid out in its natural orientation.<br><code>"horizontal"</code>:</p><p>If a text's language supports horizontal writing mode, symbols would be laid out horizontally.</p><p><code>"vertical"</code>:</p><p>If a text's language supports vertical writing mode, symbols would be laid out vertically.</p></td><td>string</td><td>''</td></tr></tbody></table>

###