Hello,
From a lot of your comments I’ve learned that currently, the best way to import custom icons is by adding SVGs into HTML elements.
I’ve started doing it that way and I understand why it’s the best way. However, I struggle a lot with centering them and scaling/descaling them if the icon size should be different from the SVG downloaded.
Could someone please describe to me the best process to import and center SVGs into HTML, and be able to scale them up or down without losing the center arrangement?
I’ve tried adding a Div to that HTML element, then aligning content and centering it, but when I scale the SVG or stuff, it doesn’t really stay centered… As far as I’ve researched SVG act a bit differently…
Basically, what’s your process of adding custom icons as SVGs to Bubble via HTML?
Best regards,
T
We always just use Bubble’s “Image” tag to upload SVG’s and we haven’t had any issues with centering. Maybe try that.
Hey @williamtisdale , thanks for your input. I agree that’s one of the effective methods, but the only issue is that we would need colors to dynamically change and to have these icons in the database (so a User can pick from the range of options)… Is this possible to be made with the method you have mentioned?
What we do is usually get icons from icons8. Then we import those into figma and create 5 or 6 different icon backgrounds with slightly different shapes and colors. Then we export those as svg and upload them in bubble either in an option set or directly in a image tag where we add conditionals to use different colors based on user’s dark mode or theme color. Here is a screenshot example from figma of some of our darkmode/ lightmode icons.
1 Like
