Bubble does not natively render SVG files in Image elements, but you can embed SVGs using HTML elements for full control over styling, color changes, and animations. This tutorial covers embedding SVGs inline, changing colors dynamically with custom states, and when to use SVG versus PNG or Image elements.
Overview: Using SVGs in Bubble
SVG images scale perfectly at any size, have tiny file sizes for icons and illustrations, and can be styled with CSS. Bubble's Image element has limited SVG support, so the HTML element is the preferred method. This tutorial shows you how to embed, style, and dynamically control SVGs in your Bubble app.
Prerequisites
- A Bubble app with pages where you want to use SVG images
- SVG files or inline SVG code for your icons or illustrations
- Basic understanding of HTML elements in Bubble
Step-by-step guide
Embed an SVG using an HTML element
Embed an SVG using an HTML element
In the Design tab, add an HTML element where you want the SVG. Paste the SVG code directly into the HTML element's content. You can get SVG code by opening an .svg file in a text editor and copying the contents (it starts with <svg and ends with </svg>). The SVG will render directly in the HTML element at whatever size you specify on the element.
Pro tip: Add width="100%" height="100%" to the <svg> tag to make it fill the HTML element's dimensions.
Expected result: The SVG renders in the HTML element, scaling crisply at any size.
Change SVG colors dynamically
Change SVG colors dynamically
To change SVG colors based on user interaction or data, replace the hardcoded fill or stroke colors in the SVG code with dynamic expressions. Create a custom state on the page (e.g., icon_color, type: text). In the HTML element, use Bubble's dynamic data insertion to set the fill attribute: fill="[CustomState icon_color]". Change the custom state value in workflows (e.g., on hover, on click) to update the SVG color in real time.
Expected result: SVG colors change dynamically based on custom state values or user interactions.
Use SVG as an image source in an Image element
Use SVG as an image source in an Image element
If you do not need dynamic styling, you can use an SVG file in a standard Image element. Upload the .svg file using the File Uploader or reference an external SVG URL. Set the Image element's source to the uploaded file. This approach is simpler but does not allow dynamic color changes or CSS styling. The SVG still scales cleanly.
Expected result: SVGs display in Image elements with clean scaling but without dynamic styling capability.
Optimize SVG files for web performance
Optimize SVG files for web performance
Before embedding SVGs, optimize them. Remove unnecessary metadata, comments, and editor-specific attributes. Tools like SVGO (available at svgomg.net) strip bloat and reduce file size by 30-60%. Keep SVG code under 2KB for icons and under 10KB for illustrations. Replace complex paths with simplified versions where possible.
Expected result: Optimized SVGs load faster and reduce page weight.
Create a reusable SVG icon system
Create a reusable SVG icon system
For icons used across multiple pages, create a Reusable Element containing an HTML element with the SVG code. Add a custom property for the color value. Use this reusable element throughout your app, passing different colors via the custom property on each instance. This creates a consistent, maintainable icon system.
Expected result: A reusable SVG icon component that accepts color as a parameter and works across all pages.
Complete working example
1SVG IMPLEMENTATION SUMMARY2============================34METHOD 1: Inline SVG in HTML Element5 HTML element content:6 <svg width="100%" height="100%" viewBox="0 0 24 24" 7 fill="none" xmlns="http://www.w3.org/2000/svg">8 <path d="M12 2L2 7l10 5 10-5-10-5z" 9 fill="[CustomState icon_color]" />10 <path d="M2 17l10 5 10-5" 11 stroke="[CustomState icon_color]" 12 stroke-width="2" />13 </svg>1415METHOD 2: SVG in Image Element16 Image element → Source: uploaded .svg file URL17 Pros: simpler setup18 Cons: no dynamic color changes1920DYNAMIC COLOR CHANGE:21 Custom state: icon_color (text, default: "#333333")22 Condition/workflow:23 On hover → Set state icon_color = "#0066FF"24 On un-hover → Set state icon_color = "#333333"25 HTML element uses [icon_color] in fill/stroke attributes2627REUSABLE SVG ICON:28 Reusable Element: SVGIcon29 Custom property: color (text)30 HTML element:31 <svg fill="[color]" ...>...</svg>32 Usage on any page:33 SVGIcon instance → color = "#FF0000"3435SVG vs PNG COMPARISON:36 SVG advantages: scales perfectly, tiny file size for icons,37 dynamic colors, CSS animations, accessible38 PNG advantages: better for complex photos, wider browser39 support for complex filters40 Use SVG for: icons, logos, illustrations, simple graphics41 Use PNG/JPEG for: photographs, complex imagesCommon mistakes when using SVG in Bubble
Why it's a problem: Using large, unoptimized SVGs with unnecessary metadata
How to avoid: Run SVGs through SVGO (svgomg.net) before embedding to strip unnecessary data and reduce file size
Why it's a problem: Hardcoding colors in SVGs that need to be dynamic
How to avoid: Replace hardcoded color values with Bubble dynamic expressions referencing custom states
Why it's a problem: Using SVGs for complex photographs
How to avoid: Use SVG for icons, logos, and illustrations. Use JPEG or WebP for photographs.
Best practices
- Use inline SVG in HTML elements for icons that need dynamic colors or animations
- Use Image elements for static SVGs that do not need dynamic styling
- Optimize all SVGs with SVGO before embedding to minimize file size
- Add width="100%" height="100%" and a viewBox to SVGs for responsive scaling
- Create Reusable Elements for icons used across multiple pages
- Use SVGs for icons and logos, raster formats (JPEG, WebP) for photographs
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to use SVG icons in my Bubble.io app with the ability to change their colors dynamically based on user interaction. How do I embed SVGs in HTML elements and connect the fill color to custom states?
Add SVG icons to my navigation. I need the icons to change color when the user hovers over them or when the current page matches the nav item. Use HTML elements with dynamic fill colors.
Frequently asked questions
Can I use SVG files in Bubble's Image element?
Yes, but with limitations. You can upload SVG files and reference them in Image elements, but you cannot dynamically change colors or apply CSS animations. For full control, use inline SVG in HTML elements.
Where can I find free SVG icons?
Popular sources include Heroicons (heroicons.com), Feather Icons (feathericons.com), Lucide (lucide.dev), and Font Awesome (fontawesome.com). All provide copy-paste SVG code.
Do SVGs affect page performance?
SVGs are typically much smaller than raster images for icons and simple graphics. A typical SVG icon is 1-3KB versus 10-50KB for an equivalent PNG. However, very complex SVGs with thousands of paths can be slower to render.
Can I animate SVGs in Bubble?
Yes. Add CSS animations directly in the SVG code or in a style tag within the HTML element. You can animate stroke, fill, opacity, transform, and other properties.
How do I make SVGs accessible?
Add a title element and aria-label attribute to the SVG tag. For decorative SVGs, add aria-hidden="true" to hide them from screen readers. RapidDev can help build accessible interfaces in Bubble.
Can I use an SVG icon library like Font Awesome?
Yes. Add the Font Awesome CDN link in Settings → SEO/metatags → Header, then use <i> tags with the appropriate classes in HTML elements throughout your app.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation