AnsweredAssumed Answered

Customising Canvas skin

Question asked by David Millington on May 1, 2019
Latest reply on May 2, 2019 by David Millington

Hello all developers,


I wonder if anyone has managed to update their Canvas sites with new, clickable, global icons, and if you would be willing to share how you managed it? I have achieved this with limited success, so I'm looking to take this further. I shall briefly explain what I have accomplished and what I wish to achieve.


I have managed to customise our Canvas website by the addition of non default Canvas icons to the vertical global navigation bar. This was achieved with some custom CSS/JavaScript that we acquired from a Canvas source, then uploaded to the Canvas Themes area. Linking from the icon to a cross-college area within Canvas, or an external site, is easily achieved with some standard html code. Adding more of the same icons is easy by replication, but I am really struggling to add a different icon. Is there anyone else that has experience with this? This is what I have done so far...


I acquired a separate icon from a third party as a jpg, then converted it to an SVG on the freeware site "". I copied the CSS/JavaScript of the old icon into CodePen.  I then added code for the new icon into the space underneath and added some back-colour to make sure both icons display in the browser. I removed the back colour and then copied this code back into the JavaScript file and re-uploaded to Canvas. Both icons, however, fail to display.


For anyone wanting to view my endeavours, I have created an 11 minute video clip showing this, but didn't want to clutter this forum unnecessarily if someone already has a clear solution.


Any advice would be gratefully received?