MazeMap supports adding custom icons to be used on POIs.

All customers are entitled to have up to 20 custom icons for free. If you would like to upload more, please contact support@mazemap.com for prices and quantity.

Guidelines for custom icons

SVG File Format

• Icons must be delivered to us in SVG file format.
• The SVGs files should meet the following technical qualifications:
  

  • No SVG elements except for paths.

  • Flatten the SVG as much as possible. 

  • Avoid groups or transforms if possible. No guarantee for icons working with complex groups and transforms.

  • Don't use "shadow" and "stroke" effects. Flatten strokes into geometries with fill instead.
  • Use only flat fills, not gradients or transparency.

  • Try to use consistent width/height boxes for all submitted icons

  • Units must be in pixels.
  • Don't use styles, but instead use attributes for colour styling.
    Bad: <style>.mystyle{fill: #FC0}</style> 
    Good: <path fill="#fc0">

Sizing of icons

The exact sizing of the icons in the resulting maps can vary, as we do scaling of icons to fit the maps.
But a rule of thumb is to design the icons to be displayed at a size between 20x20 and 30x30.

You do, however, control the relative sizing of the icon by the size of icon in relation to its viewport. The amount of "white spacing" around the icon when exporting it, decides the resulting size.

Rule of thumb: 16% buffer. 34x34 in a 50x50 box

Our rule of thumb is to have icons designed as 34x34 in a 50x50 box, and then adjusting individually as necessary. That should result in around 16% whitespace on each side of the icon.

Example:

Design Icons to be displayed on non-white backgrounds

Another tip is to design the icons such that they can be placed on non-white backgrounds.

This is achieved by remembering two things:

No "holes"

Don't have transparent "holes" in your icons. Test your icons on top of a coloured background and see that nothing of the background is visible through your icon.

Example:

Design icons to be readable on "noisy" backgrounds

Adding a thin, white border around the icons will make them more legible when placed on top of patterned/colourful backgrounds.

Example:

Questions? Need help?

As always - we are available to assist in helping you if you have questions or need extra help in getting your icons to work.

Don't hesitate to send us an email at support@mazemap.com