How to use SVG in Bubble

The simplest way to use SVG in Bubble is either to paste the SVG code directly into an HTML element, or to upload the SVG file as an image and display it in an Image element. If you need the SVG to be styled or dynamic (like changing colors), the HTML element method is the correct one.

Two main ways to use SVG in Bubble

Bubble does not have a special “SVG element”, so you use either the HTML element or the Image element. The choice depends on whether you need the SVG to behave like code (editable, color‑changeable) or behave like a static picture.

• Using HTML element: Best when you want to edit the SVG or style it.
• Using Image element: Best when SVG is static and you don’t need to modify its colors.

Using an SVG inside an HTML element

This is the method most Bubble developers use when they want to change fill colors, run conditions, or animate the SVG with CSS. You just copy the raw SVG code and paste it into an HTML element.

<div style="width:40px; height:40px;">
<svg viewBox="0 0 24 24" fill="#4a4a4a">  
  <circle cx="12" cy="12" r="10"></circle>  
</svg>
</div>

You can even insert dynamic Bubble data inside the SVG if you need it, for example to change the fill color:

<svg viewBox="0 0 24 24" fill="<span style='display:none;'> </span>">  
  <circle cx="12" cy="12" r="10" fill='{{Parent group's color}}'></circle>  
</svg>

(Bubble lets you place dynamic expressions inside HTML elements.)

Using an SVG file as an Image

If you upload the SVG file to Bubble’s File Manager, you can display it with an Image element just like PNG or JPG. Bubble serves SVGs correctly, but you cannot change their internal colors because the browser treats them as external files, not inline code.

• Upload: Go to Data → File Manager → Upload.
• Display: Use Image element and set the image source to the file’s URL.

When each method is best

• Need color changes, animations, conditionally hiding pieces? Use HTML.
• Just showing an icon or logo with no styling? Use Image.
• Need performance optimization? Inline SVGs inside HTML load fastest.