Editable Icon Library

Hello,

I would use several icons which are not in the Bubble icon library, and I didn’t find a way to do this without converting them into pictures (but it doesn’t fit with the purpose).

I’d be glad to be able to add SVG pictures to the Icon Library.

Thanks in advance!

Noel

5 Likes

+1 for this. Custom icons (by uploading SVGs) would be really sweet. Bonus points if we could control the colors of those SVGs within Bubble.

4 Likes

Yes, the first purpose is to not have to change the image color every time I need the same shape with a different background!

3 Likes

+1, I would love to have this feature

Great idea

Alternatively, being able to add a class to objects would be a good solution too. (Now, you’re only able to add an ID.)

That way, you could simply add a class “red” to your SVG icon(s), and then add some simple custom CSS to your page (to make all icons with class “red” fill red).

This is, of course, not a ‘no-code’ solution, but adding classes to objects would come in handy for tons of other things too.

3 Likes

I agree! Would love to see more options available for icons.

The https://fontawesome.com/ library is one option.

1 Like

It does use Font Awesome today, but it uses 4.7. Font Awesome 5 has a ton more icons. I keep running into this when implementing designs my partner hands to me.

+1
This would be a real treat to have

Hang on a second. I tried to make an icon of a guy walking and they only options are a guy with a cane, obviously blind. Is this literally all we have and what is a good workaround? This is what I need.

09%20PM

This is what I get with icons in bubble (right?)

35%20PM

You can add an “image” element that contains an SVG file of any icon you find on the web. It’s a pain, but doable.

Sorry, the documentation is really lacking - I can literally load an .svg into Image?

What are Shapes for?

Yep! For anything that looks like an icon or a logo, I use image elements with SVGs.

I’ve been using Bubble since 2015 and the only time I ever use a shape is to act as hidden spacing elements for making the responsive engine work right. Others may use them for design, but I don’t and haven’t had any issues by avoiding them altogether.

Thanks Andrew, really cool. Got it working right from FontAwesome site which is clearly where the designers of my app got their icons from now that I see it.

Theoretically what is Shape for?

Is there a way to control the color of the svg? Do I need to do that in illustrator or something else (ugh that’s clearly where it becomes a huge pain if so)

Illustrator worked fine. :slight_smile:

Actually I’m trying to do that with an image too, I was expecting to be able to change the color attribute of an SVG.

Note sure what difference there would be between image and icon, but yes, being able to modify some SVG parameters would be awesome.

+1 for this. Would love to be able to change colors of my uploaded SVGs in bubble as you can with the icon elements.

You can use the svg code in an html element and do fun stuff with the colors like dynamic colors, animated gradients etc.

@AA-ron @benjamin1

3 Likes