How to prepare custom icons
For a fully custom map, you need custom icons – from a single icon to a complete visually consistent set. Whether you download ready-made icons or opt to prepare your own icon set in a graphic design program, here’s the technical requirements and tips for best results.
Size and count
To ensure map performance and compatibility with all devices, icon sets have the following constraints:
- Icon size: Maximum 256×256 px. For better downscaling and sharper rendering, we recommend to prepare icons in even-pixel dimensions (e.g. 24×24 px).
- Icon count: Maximum 500 icons per set.
- Total sprite size: The generated sprite sheet is the “canvas” for all your icons. Its size is the hard limit which cannot exceed 4096×4096 px.
Note
The icon size and count are “soft” limits that affect one another. You can upload up to 500 icons if they are smaller in dimension, but significantly fewer if they are near the maximum 256px resolution as they would exceed the total sprite sheet size.
Input format
The best practice is to always prepare your icons in vector format, because it preserves the editability of your source files. For the upload, you can export the vectors from your graphic design program into either vector or raster, based on the specific type of icons you’ve prepared and how you want them to appear in the map.
Vector icons (SVG to SDF)
Icons in vector format are recommended for most map features. We save them in the SDF (Signed Distance Field) format, which is technically raster, but preserves the benefits of vector: the possibity to customize the icon’s fill color, outline, and size while maintaining sharp edges.
Benefits
Color, outline and other properties are defined per map layer, which means that you can reuse a vector icon set across multiple layers or even multiple different maps and have it customized differently in each of them. Also, you can customize icons and labels together to achieve a polished unified look.
Requirements
To be able to style and customize your icons as described:
- Icons must be monochrome (black)
- Background must be transparent
- Design should be clean and simple – no tiny details, overlaps, frames, etc.
The map editor takes just the shape of the icon and applies the selected fill color and outline, meaning that your icons don’t preserve any defined colors, overlapping shapes or details inside the icon.
If you have multi-color icons and want them to appear exactly as designed, you have two options:
- Export icons from your design program and upload them as rasters.
- Use vectors, but turn off the “customizable” (SDF) option during upload.
In either case, the icons will be converted to standard raster format, preserve their colors and details, and won’t be customizable in the map.
Unsupported SVG features
- Animations
- Links
- Scripts
- Embedded images
A SVG file with these features will be refused at upload.
Raster icons (PNG)
Raster icons are static images where the colors are already “baked” into the file, meaning you cannot customize them in any way.
Use the raster format for multi-color icons, photos, or complex patterns that need to stay exactly as they are.
Warning
Unlike vectors, raster icons cannot be upscaled. For this reason, we expect you to upload high quality images and we save them as the double-resolution variant (@2x), which is by default used on high-resolution displays like Retina. This means that your icons will render in half the size. Keep this in mind when preparing your icons.
Next step: Upload
When you have your icons ready, add them a to an icon set so that you can use them in a map.