Customize icons to elevate your web maps

Published March 12th, 2024

Customize Icons

Change colors, outlines, sizes, and much more with the new map icon experience in MapTiler Customize. We have also included over 200 new icons into the service, which you can customize and include in your map styles.

GET STARTED READ THE DOCS

Along with the improved style controls, we have completely overhauled how you upload your own icons, create sprites, style by zoom level, and improved the collision detection with labels.

All of this focus on better icons has also enabled us to update some of our preset mapping styles with Bright, Outdoor, Streets, Topo, and Winter maps, all getting a much broader range of icons with more colors and sharper outlines.

Customizing icons for your web maps

Icons are now as flexible as points and polygons, with easy-to-use controls to change their color, outline, and size. By default, an icon's color will match its label; however, switching them to be adjusted separately is simple.

Icon styling can also be made zoom-dependent, with color, size, and even the icon itself changing as you zoom in and out on the map.

Create different styles for your icons at different zoom levels

Free icon library for web maps

To help you create great-looking maps from the start, we have included more than 200 icons to choose from. You can style them any way you want, and they will be interoperable between map styles, so you can create styles that can have light and dark versions, for example.

Choose from over 200 symbols in our library

Remember that the icon's layout is automatically adjusted so that the label text does not overlay them. This collision detection adjusts at every zoom level, so you always get the best amount of information on your map at one time.

Uploading icons to use in JavaScript maps

If you can’t find the perfect icon from the ones that come free with the service, you can upload your own! You can easily add icons as SVGs and then generate sprites directly in Customize. Sprites are the most efficient way of using icons on your maps, and the Customize tool will create them for you. The sprites are generated in SDF format, so they behave like vectors, not losing their sharpness as the size changes.  You can also generate fully raster sprites too.

Should any issues arise with the icons, there is an automatic fallback to a dot, so there will always be something on the map!

New Icons on our pre-set map styles

Thanks to all these improvements to the icon styling, we have been able to update some of our core styles. Our Bright, Outdoor, Streets, Topo, and Winter maps have all been upgraded with improved icons, especially when used in Dark or light modes. We have also worked on updating the categories in the PoI layer so you can navigate your way around the data more easily and make more effective customizations!

New icons for our map styles

 

Share
Petra Duriancikova

Petra Duriancikova

Cartographer
Published on March 12th, 2024