Importing SVG icons to your Bubble app

Hi everyone :wave:,

Quick question. How do I import SVG icons to Bubble? For example, I would like to import the following icons from this website and from this one too Can someone please show me how to do this?


Feather icons are available via a free plugin:


I just use an image element and upload the svg to it.

Another good icon source is

1 Like

Yeah, I saw that plugin but when I change the icons, it doesn’t actually change to the icon I selected.

The image element actually takes SVG icons? By the way, thanks for the Ikonate link.


Yeah they work perfectly with the image element.

You’re welcome.

Some other sites to checkout are:

Free icons, stock images, and music

UX/UI design ideas

Mobile UX workflow patterns


I usually got icons from

when downloading the svg icon I would then open the icon in a text editor to get the HTML code of the icon…then I would store that text value in my database (usually as an option set)…then I’d use an html element to load the icon referencing the HTML code saved as an option set.

was able to do color changes by doing find and replace.

here is a link to the thread I learned the trick from


Hey @boston85719,
Great trick indeed as I am a big fan of Noun Project icons (actually the $35 yearly plan for unlimited icons in SVG format is a sweet added value to any app project).

I am just stuck with the implementation of your tip: I save the icon and HTML code as a text attribute in my option sets, then I select this icon’s attribute as dynamic data in my HTML element on my page. But the icon doesn’t appear. However if I simply copy paste the HTML code in my element then the icon appears alright. And then second question, how do you do to change the style/color of the icon? In the HTML style we can only change padding, shadow and border style, but what about the color of the icon?

Hope you can detail a bit more this part for me!
Many thanks,

Hey Quentin

Check out the thread I linked to in the post above that I learned the trick from. It goes through how to do the color change.

In regards to why it doesn’t work for your option set setup, I am not sure why it isn’t working for you.

1 Like

Hi @boston85719 many thanks. I contacted Patricia directly from the thread since I still have an issue to display the icon with an HTML element from my DB/Option Set. Hope she will help me sort this out. Anyway, thanks! Quentin

1 Like

Hi - I know I am resurrecting this topic; however, I want to better understand the best practice in leveraging my icons in my application.

  1. Use the image visual element and import the SVG
  2. Store the SVG in an option set; you can call that option :persevere:
  3. Store the SVG code in the database or option set and use the HTML element
  4. Other magic

I typically get my icons from


1 Like

Interested… I currently use option sets, although this gets messy because I have to create an option for each colour variable of the icon…