...

If you would like to have custom icons, please send us a request and we will follow up.

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.

...

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.

...