Hi everyone 
,
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,
I just use an image element and upload the svg to it.
Another good icon source is https://www.ikonate.com
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
https://dribbble.com/
Mobile UX workflow patterns
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
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.
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
Hi - I know I am resurrecting this topic; however, I want to better understand the best practice in leveraging my icons in my application.
I typically get my icons from https://www.iconfinder.com
Travis
Interested… I currently use option sets, although this gets messy because I have to create an option for each colour variable of the icon…
