Your Customers are Mobile, you will be too …

In this tutorial we will show you how to change the default Moodle icons when creating your own theme. While the default icons that come with Moodle are good enough for a lot of basic installs when we are creating our own themes it is not unusual to come across situation where the default icons do not fit with the rest of your design. We will show you how to override the default icons rather than replacing them in the core. This way when we upload our theme to our website or someone else’s website our icons will automatically go with the theme so that we do not have to muck around modifying the core of Moodle to achieve the look and feel we are looking for.

Moodle 2.1: Changing the Default Moodle Icons in your Custom Theme

First thing we need to do naturally is work out what icons we wish to replace, what their names are and create the images we want to replace them with. If you open the folder containing the installation fo your Moodle you will find a folder inside it called “pix”. This folder contains all the core Moodle images and icons.

Search this folder for icon or image you are looking to replace. Make a record both of the file name( and extension) and the folder it is in. For example if you were to want to replace the info icon it is found at


So we need to create the image we wish to replace it with and save the file in the same format with the same name so in this case info.gif.

Navigate to the folder for the theme you are working on and in the top level of your themes folder create a new folder call pix_core

If the icon you are replacing inside a folder inside the pix folder we need to create a new folder inside pix_core with the same name. In the case of our example we would need to create a folder called i inside of pix_core. We now need to put a copy of our new icon we are using as the replacement into this folder. So for the above example we would now have a file


Now when ever your theme is in use the info file you have placed inside your theme will automatically replace the core info.gif file.

If you want to replace an icon used by a Moodle plugin rather than creating a pix_core folder we need to create a pix_plugins folder and place our replacement icon and images in here using the same rules as above for the folder structure.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: