# Adding icon files

{% hint style="info" %}
To review key information on designing icons, see [Icons](/complete-reference-guide/customization-options/custom-configurations/creating-custom-configurations/planning-configuration-and-data-structure/icons.md).
{% endhint %}

Once you've settled on the design or concept for your icons, you'll need to generate `.svg` files for each one to be saved in the **icons** directory. Icons should be created as 100x100 pixel graphics that are clear when viewing at 100%.

To generate `.svg` icons for Mapeo, there is an online Mapeo Icons Generator tool accessible [here](https://icons.earthdefenderstoolkit.com/).

We have also documented two workflows to generate Mapeo-compatible `.svg`  files using software, one using a commercial product (Adobe Illustrator) and another using a open-source product (Inkscape).

* [Creating and exporting SVG files using Adobe Illustrator](/complete-reference-guide/customization-options/custom-configurations/creating-custom-configurations/coding-configuration/adding-icon-files/creating-and-exporting-svg-files-using-adobe-illustrator.md)
* [Creating and exporting SVG files using Inkscape](/complete-reference-guide/customization-options/custom-configurations/creating-custom-configurations/coding-configuration/adding-icon-files/creating-and-exporting-svg-files-using-inkscape.md)

## Naming icon files

Icons need to be read by MAPEO in two sizes: 100 pixels and 24 pixels. For that reason there is a specific file naming convention:

* *icon-name*`-100px.svg` 
* *icon-name*`-24px.svg` 

Each icon can be duplicated and renamed so that there is one of each size. They are opened and read by the `.json` files in the **presets** folder. Verify that `name` is correctly entered where needed (more on this in the next section). The build script will process the pixel size suffix.

## Additional resources

* [Troubleshooting SVG image errors in Mapbox Studio](https://docs.mapbox.com/help/troubleshooting/studio-svg-upload-errors/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mapeo.app/complete-reference-guide/customization-options/custom-configurations/creating-custom-configurations/coding-configuration/adding-icon-files.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.