Create and Upload an Icon Set in Evolve

Evolve allows you to upload your own icon set and use them in custom themes. To accomplish this, you will need to use the IcoMoon tool; this is what our Evolve team used to create the default icon set available for your courses.

In this article, you'll learn how to create and upload your own icon set using the IcoMoon tool.

Create an icon set

First, you'll need to open IcoMoon within your web browser. You can access the site via the link below:

Next, you'll want to launch the IcoMoon app by clicking the IcoMoon App button.

When the IcoMoon app first loads, click the Import Icons button on the top left. In the file dialog, select the default .svg file included in this page, linked below:

When the file is selected you will be asked to use the font’s metadata. Click Yes. You will now see 68 icons in a set called default. These are all the icons that Evolve requires to be available.

Next, select all the icons to begin replacing them. You can either click each one or use the menu on the right-hand side and click Select All. It’s important that all icons are selected otherwise you will find missing icons in your theme.

Once all the icons have been selected, click on the Generate Font button on the bottom right. You will then be taken to a new screen. Here, you can start replacing the icons with your own. Start by clicking on an icon. A dialog should appear with more details about that icon.

This dialog now allows us the ability to replace the icon SVG. Click the Replace button. This will now open a file dialog where you can pick your icon. The icon must be in SVG format and the color must be black (hex code #000000).

Once you have picked your SVG file, it will update the icon set. This should also be reflected in the dialog. This can be done for all icons or the few you would like to change.

Note: It it important that the name of the icon is not changed. Evolve requires the name to be the same in order to show the correct icon.

Once you have replaced the icons, it's time to publish them. First, we will need to set a unique name for this icon set. Click the gear icon next to the download button on the bottom right. This will show a dialog where you can set the name. All other settings should be the same. Close the dialog once you have changed the name.

The icon set is now ready to be downloaded. Click the Download button on the bottom right and save to your computer. This should download a zip file. We are now ready to upload this set into Evolve.

Upload an icon set to Evolve

In Evolve, navigate to the Assets tab in the navigation bar. Then click on Manage Icons near the top left of the screen. Here you can see all installed icon sets. They can also be removed here if no longer required.

Click Upload Icons on the top right of this screen. You will be presented with a screen where you can select the zip that you download from IcoMoon.

If the icon installed successfully, click the Close button and you will now see that icon set listed in the Manage Icons screen. This icon set is now ready to be selected in your custom themes.

An error dialog will be displayed if there was an issue with the icon set. If this happens, follow the steps mentioned above and try again. Make sure not to set a name that is already being used by a previous icon set. If you are unable to upload your icon set or have any other issues, please contact the Evolve support team through Support in Evolve.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.