Recommendations for Custom Icons or Alternatives to Font Awesome 4

brookelustig · 2025-01-20T23:17:50.039Z

Hi everyone,

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.

esardila · 2025-01-20T23:22:37.297Z

Hey @brookelustig,

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.

image730×446 25.2 KB

stela.vas · 2025-01-20T23:46:41.112Z

Hello!

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.

brookelustig · 2025-01-21T00:00:17.223Z

@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?

esardila · 2025-01-21T00:24:31.389Z

@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.

bkerryk · 2025-01-21T00:28:38.232Z

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.

Bubble

Templates for Bubble

Buy and sell Bubble templates to speed up app development. Bubble is a visual programing language that lets you build apps without code.

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.

Icons:
Lucide
Radix Icons
Phosphor Icons

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.

brookelustig · 2025-01-21T00:45:55.928Z

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?

Screenshot 2025-01-20 at 5.45.01 PM546×590 38.2 KB

esardila · 2025-01-21T01:01:36.660Z

There is an open discussion about this topic here. Maybe there’s somebody who already faced the same issue.

system · 2025-03-31T23:18:04.471Z

This topic was automatically closed after 70 days. New replies are no longer allowed.