I’m looking to upgrade the visual appeal of my app by replacing the current icons, which are from Font Awesome 4, with more modern and fun options. I’m seeking recommendations for icon solutions that meet the following requirements:
Minimal impact on load time: The icons should not affect the app’s performance.
Customizable colors: It should be easy to change the icon colors dynamically, such as when they are clicked or in different states.
Any suggestions for icon libraries, tools, or approaches that fit these criteria? I’d greatly appreciate any advice.
The icon element now includes multiple libraries. I’d say this is the best approach if you want to apply changes fast without having to recreate the conditional formatting.
I love using the HeroIcons plugin. Each icon has a text attribute, so you can save it as a text field in the database or even as an attribute of an option set to load the icon dynamically. You can also easily change colors using conditionals. The icon library is extensive and quite impressive - you can check it out here.
@esardila I was reading about that but I don’t see it in the bubble app (only font awesome 4), is there a special setting I need to change to have access to this? Also, would adding all the icons from these libraries not impact load time?
@brookelustig I’d say it has to do with the version of your app. Anything above 23 probably, sorry I can’t recall the exact version.
About the load time, I’ve tested a couple and the difference was imperceptible, at least for the scenarios I worked with.
The only downside I could think of now is, as @stela.vas mentioned, you can’t change the icon dynamically with expressions. Conditions should be enough workaround but could be tedious if you have too many.
An option i have enjoyed for the past year is using the SVG itself from any SVG library using the SVG element plugin I created.
You can see the svg in the editor which is nice and I have a made a multi-colour version which takes a multi-colour svg and give you options to change its colour dynaiclly too.
This plugin is for me and my clients but it’s there free for anyone to use or fork.
The only caveat that I can’t overcome is a bug that Bubble hasn’t fixed with the colour picker when creating conditionals (the picker doesn;t show and its a normal expression input which isn’t good for colours) but I have a work around to that if you actually end up using it and want to know.
Thanks for all the tips, I’ll check out the plugins! Regarding the icons offered in bubble I’m still only seeing font awesome 4. I have the latest version of the editor (29). Does anyone have any tips or idea what’s going on?
