Did you know you can easily customize Moodle’s default course activity icons? If you’re using Moodle’s default theme Boost, or a Boost-based Moodle theme (e.g. Edutor or Maker), you can replace the default icons with your custom ones to better fit your site’s course design. In this tutorial, we will show you how to do so using the URL activity icon as an example.

Step 1: Create a Folder Structure for Your Custom Icons

Moodle organizes its activity icons within specific folders, so to replace an icon, you need to replicate this structure within your theme’s directory:

1) Create pix_plugins Folder:

In your theme directory, create a new folder called pix_plugins.

2) Create mod Folder:

Inside the newly created pix_plugins folder, create another folder named mod.

3) Create url Folder:

Finally, within the mod folder, create a folder named url. This folder name must match the folder name used for holding Moodle’s default icons. You can find all the default activity folder names under moodle/mod/

Your directory structure should now look like this:

For Boost Theme:

moodle/theme/boost/pix_plugins/mod/url

For Edutor Theme:

moodle/theme/edutor/pix_plugins/mod/url/

For Maker Theme:

moodle/theme/maker/pix_plugins/mod/url/

Step 2: Upload Your Custom SVG Icon for the URL Activity

With the folder structure in place on your server, you’re ready to upload your custom icon:

1) Ensure Your Icon is Named Correctly:

Your custom SVG icon should be named monologo.svg.

2) Upload the Icon:

Upload monologo.svg to the url folder you just created.

The full path to your new icon should be:

moodle/theme/your-theme-name/pix_plugins/mod/url/monologo.svg

Step 3: Purge Moodle’s Caches

Log into your Moodle site as an administrator and navigate to: Site administration > Development > Purge caches

Click the “Purge all caches” button to purge all caches. This forces Moodle to refresh its cached files, including icons.

Go back to your course, and you should see the URL activity icon changed to your custom one.