Skip to main content

Add a custom icon

Join the Mapbox Developers Discord Communityarrow-right

  • This is a modified version of the Streets template style.

  • An SVG has been uploaded to the style editor using the Images option in the toolbar.

  • The Icon and Position options for the country-label layer (a symbol layer) have been modified using Overrides.

Add to your account

About this style​

  • SVG assets: Scalable Vector Graphics (SVG) is a markup language for describing two-dimensional vector graphics. You can upload SVG images to your custom style in the Mapbox Studio style editor. You can click on the Images option in the top toolbar to manage the SVGs in your style. In this example, an icon called mapbox-logo has been uploaded. Read more about troubleshooting SVG uploads in our SVG asset errors in Mapbox Studio guide.
  • Symbol layer: Icons are added to the map using a symbol layer. Symbol layers are the most complex style type in Mapbox Studio. Symbol layer styling is separated into four main groups: Text, Icon, Position, and Placement. In this example, the Icon and Position options have been modified. Click on the country-label layer to explore the style properties in this style:
    • In the Icon tab, the mapbox-logo icon is applied to several countries using data conditions: if name_en is equal to any of the names of countries with a Mapbox office, set the Image property to mapbox-logo.
    • In the Position tab, both the Text anchor and the Icon offset property have been modified to anchor the text below the data point it is labeling and the icon is offset to be above the data point.
  • Override: In the Streets template style, many style properties in the country-label layer are controlled by components. To make changes to individual properties, switch to Layers tab, find the country-label layer, and use the Override button to customize the values described above. Read more about overrides and components.
  • Sprite: A sprite is a single image containing all icons included in a style. Sprites are often used in web development and even video games to improve performance. If you’re using Mapbox Studio, you don’t have to worry about the technical underpinnings of sprites, but if you're interested in learning more, you can read about sprites on our Help page.

Looking for more guidance? Read our tutorials.

Join the Mapbox Developers Discord Communityarrow-right
Was this example helpful?