Update Font Awesome Icons from V.4

Is Bubble going to ever update font awesome icons to a newer version?

Some icons in V6.1.2 in font awesome look good.


They really should. FA 6 is amazing.

I’m hoping either Bubble team updates this incredibly outdated plugin, or someone becomes the hero we need:

It will be amazing…

Yessss!! Would love if they do! When searching the font awesome library, it’s hard to know which ones you can code in to your text as some work and some don’t.

You can upgrade by adding the latest FA version to your page HTML header (you can get the header script here https://fontawesome.com/start)


In the editor -

And in run mode -


@tim12333 thanks for sharing this. I just attempted this and it works great for getting free icons in.

Have you attempted this after subscribing to a plan from font awesome for access to the Pro icons? Curious if they come through in the same way. My assumption is they would because you have to sign up to get the script required and it is attached to your font awesome account. Just wondering if you have experience with it or not.

As word of warning to somebody utilizing this. I put the script in my settings header and it worked there the same as if I had placed it in an html on a page. What I ended up noticing that my previous icons, some of them didn’t exist anymore in that on page preview I would see a rectangle with an X in it. In other situations where I had two icons change base on conditionals, if the conditional was met and the icon was not available the other icon was shown. Personally, I am not spending time at the moment to look through the icon list available through the script to see if the missing icons were under an ‘updated’ selection or were just removed

1 Like

Yep I’ve noticed some of the icons do not work (the names of them have changed since v4)

As far as using pro icons, you could always do the text method where you insert [fa] fa-code [/fa] into a text box. The pro icons will have different endings like [fa] fa-code-pro [/fa] or something along those lines. (I think this will work, haven’t tried it)


Pro Icons show up when you view your site through a browser but you don’t see them when you are building. The exception being duotone which show up as regular icons, otherwise it is exactly the same. I also have the script in the settings header but I could just pop it in reusable elements like headers

1 Like

Just an update top this, I worked out how to get all the icon weights including duotone. you omit the first “fa-” so say the HTML in FA is
<class=“fa-duotone fa-megaphone”>
we put in [fa]duotone fa-megaphone[/fa]


can i still use [fa] [/fa] with the new ones??? i use this all over my project currently and want to upgrade from the old font awesome…


Yes but the names might be different.

For example [fa] fa-map [/fa] might be [fa] fa-map-pro [/fa] with the new icons loaded.

1 Like

And if the names don’t matchup to the v4 icon names then you don’t see an icon at all in developer view. If the icon has changed, between v4 and v6 you will see the V4 icon in dev mode. This all sorts itself out one you use a regular browser.

1 Like

thx cheers

thx !

Its on our radar to update this library! The difficult part, as mentioned above, is that Font Awesome v6 is not backwards compatible with v4, so we would need a way to update the icon library in a non breaking fashion.


hey @nickc thats good to hear!

At the least a placeholder that’s representative of the icon size (say if we use fa-2xl) would be awesome even if the con itself isn’t showing. That just helps signify where icons are and allows pagination to be more accurate when building.

cheers - johnnyweb

1 Like

or just add another library?

Does Ver 6.0+ font awesome icons work in free bubble plan?
I tested and could not render.

Curious about this support as well. I’m trying to use v6 per the method described above but the weights, versions, etc. aren’t working correctly and some don’t render at all.


Just published a plugin.