Forum Academy Marketplace Showcase Pricing Features

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 https://boxicons.com/ and from this one too https://feathericons.com/. Can someone please show me how to do this?

Best,

Feather icons are available via a free plugin:

2 Likes

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

Another good icon source is https://www.ikonate.com

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.

@joe.esteban.montero

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
https://dribbble.com/

Mobile UX workflow patterns

1 Like

I usually got icons from thenounproject.com

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

5 Likes

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,
Quentin

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