How to add images to menu items

Hi there, sorry to bother you, but couldn’t quite figure out how I can add custom images to menu options (managed to successfully use the icons for menus, but wanted a sawtooth, pulse and triangle icon and I cannot find these ones in the free-icons unfortunately!).

Any help greatly appreciated thanks!


maybe An image on a push button?

1 Like

You could hack your own icons in with a bit of css:

  1. set the item’s label to ^sawtooth
  2. add this to the widget’s css (or to the root’s css if you’re gonna use it multiple times):
.fa-sawtooth {
  width: 20rem;
  height: 20rem;
  background: url(/* image icon path or base64-encoded image*/);
1 Like

Thank you again, that is working beautifully! If anyone else is interested in doing the same thing (hacking your own custom icons), I found the best thing was to download a .svg (vector file) of the icon you needed, convert it to a 20px by 20px .svg file using this free online tool , and then converting the vector into a base64-encoded image using this free online converter: . Then just paste the code into the example Jean-emmanuel posted above, and you are good to use it anywhere in your project. Absolutely great hack, I’m going to be using this loads

1 Like

Hey Kenny! I cannot figure out how to do this. Did everything as instructed above but cannot figure out what I'm doing wrong. Could I have some help please?

Here are some screenshots

Hi Mrkapow, looking at your code, everything looks set up correctly except in your "values" field on the widget you have it enclosed in square brackets, but checking back on my own template I have curly brackets, so I would try changing this first to see if it works then:


Let me know if this fixes it!

Edit: Just thought, what widget are you trying to add the vector to? Only I think this would work differently depending on what you were doing with it. On my template I had the vectors instead of numbers/labels on a menu (would also work on buttons), so this worked in 'values' for example:

"^sawtooth": 1,
"^wave-square": 0.5,
"^triangle": 0

However, if it is just a single, resizable image you want as the vector, I've found you can just paste the Base64 code (in its entirety) into an image's 'value' field and that works too. If it is just the label of a widget you want the vector on, you can just type for example '^sawtooth' (without any quotations around it) and that works too. If you are still having problems, I can post an example template if that helps.

1 Like

Hi Kenny,

I currently have the same problem, I can't have a custom image on my menu.
Would it be possible to share your template to check how you did it in details?
It will be super amazing to learn from you :pray:

Hello Swayrian, no problem at all, I've just pulled out the menu widget that has the custom vectors on it and put it on a new template for simplicity. This is nothing fancy, just a couple of custom vectors that I have defined on the css of the 'root' on the project tree. You'll see that the 'sawtooth' and 'triangle' vector are my custom ones. Then I have just recalled them on the 'values' menu section of the menu itself. There is some additional css code in the menu also, but this has nothing to do with vectors, just the background colour of the menu items itself. Let me know if this helps!

Custom Vector Example.json (7.1 KB)

1 Like

Hi Kenny,

It's super nice to see how you did it, also thanks to this now I learnt how variables can be used - Thank you so much!

However I'm a little confused about something, how do you change the size of the custom images now that they appear on the menu?
Usually it should be "font-size" but that is only changing one of the icons (the one which is not a custom image). Were you able to do it?

Hey! Thank you so much @Kenny5000 for posting that example! That helped my troubleshoot what I was doing wrong, there was something going wrong with font-size affecting it for some reason. Once deleted it worked. Also adding those numbers at the end also fixed it too. Don't know why it works, also seems to not matter what value you place those numbers

Hey @swayrian
the way I've worked around it is exporting the svg from that kenny already mentioned but instead of exporting as 20x20 I've been exporting at different sizes like 50x30 etc. then you make the changes in width and height. here is my example

"^lowpass": 1,
"^wave-square": 2,
"^highpass": 3,
"^flat": 4


.fa-highpass {

width: 50rem;
height: 33rem;
background: url(blah blah blah);

Many thanks @mrkapow
I just tested it and it seems that we have to make the svg slightly larger to have more control over it later - Time for some customization!

Glad everyone has managed to get the custom icons working! Good spot with the resizing issue; I think you are correct that I was inadvertantly making the icon too small initially to be resized, may have been confusing the px size with rem (which when I looked it up is a size relative to the pixels, whoops!). I don't know whether Jean-Emmanuel might be able to point us in the right direction for an easier way to resize these custom images! Good luck with the rest of the template building, would be interesting to see everyone's final template when they are finished, will have to post them in the section on here!

Hello it is not working for me. image not inserting

code i have is
.fa-sawtooth {
width: 20rem;
height: 20rem;
background: url(Nick Saya Clone 10.14.6⁩/Users/⁨nicksaya⁩/Documents⁩/NICK SAYA FONT.pgn);

is something wrong?



A typo : png instead of pgn ? And maybe some missing " path "

The simplet way to manage images is to put them in the same folder as your session and access them with a relative path:

/* file next to session.json */
background: url(file.png);

/* file in "images" folder next to session.json */
background: url(images/file.png);

fixed spelling still no good

thanks i got it to work

1 Like