We're upgrading our icons to Font Awesome 6!

[awesomerobot (Kris)]

What’s Font Awesome?

Discourse uses a free set of icons from Font Awesome throughout its interface. You see these on toolbars, badges, buttons, etc… here’s our composer toolbar:

Since 2018 we’ve been using Font Awesome 5 (original announcement), and in the meantime Font Awesome 6 has been released. Version 6 includes new icons, some general style updates, and renames.

As of today, Discourse will start using version 6 too! Specifically, version 6.6.0. This isn’t an enormous visual change, but you’ll notice some differences:

What does this upgrade involve?

This upgrade involves a number of renames to make things more consistent.

To support Discourse communities through the upgrade, changes will be rolled out in multiple phases:

---

Today - Font Awesome upgraded to v6, icons will be automatically remapped

Soon - deprecation messages will be enabled to help theme/plugin authors update their icon names

Q1 2025 - admin warning banner enabled for any remaining deprecations

1st April 2025 - removal of automatic remapping and admin warning banner

2nd May 2025 - removal of old icon names mapping and error level logging

---

I’m seeing a missing icon, how can I fix this?

1. Open the browser developer tools, and find the relevant element with the missing icon.

2. Note the current name of the affected icon, and look up the right icon name to update it to. The icon name mapping can be referenced at discourse/lib/deprecated_icon_handler.rb at fbc2cfb6185c00950da8e915b1a32546e7020913 · discourse/discourse · GitHub.

3. Update the relevant theme/plugin that the element belongs to, or notify its developer to make the update.

If you need help with this, please feel free to create a Support topic, or contact your hosting provider in the normal way.

What do theme and plugin authors need to know?

The methods covered in Introducing Font Awesome 5 and SVG icons will still work for adding new and custom icons.

We have since removed the remapping of the old names, and if your theme/plugin is still using old names, you’ll see blank spaces where some of your icons used to be.

There are lots of new icons!

The upgrade from version 5 to 6 introduces hundreds of new free-to-use icons, almost 500 in total!

You can browse the full set here, this is sorted to show the newest additions first — and the search is very handy: Search Icons & Find the Perfect Design | Font Awesome

[Jagster (Jakke Lehtonen)]

Is this needed anymore:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

And should this be edited:

<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('d-post-share', 'share-alt');
    api.replaceIcon('d-topic-share', 'share-alt');
    api.replaceIcon("far-beer", "beer");
</script>

[ondrej]

This is great! I can finally use the Icon I want for a category

[awesomerobot (Kris)]

@Jagster

Is this needed anymore:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

Looks like this might be related to Making tags look like real world tags - #11 by HeyRR… if you’re using CSS like content: "\f02b"; then yes you’ll still need this. This is using the icon font separately from our implementation (which uses SVG files directly)

@Jagster

And should this be edited:

<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('d-post-share', 'share-alt');
    api.replaceIcon('d-topic-share', 'share-alt');
    api.replaceIcon("far-beer", "beer");
</script>

This doesn’t need to be edited immediately, but based on the list of renames you should replace share-alt with share-nodes and beer with beer-mug-empty at some point within the next 6 months (the filled beer mug is a pro icon… I guess it’s not “free as in beer”)

[Jagster (Jakke Lehtonen)]

@awesomerobot

might be related to Making tags look like real world tags - #11 by HeyRR…

Perhaps. It was something that adviced more than once some years ago. I never really understood why, but I can copy&paste But it has something to do with ability to use Font Awesome somewhere, anywhere or something.

But if I can’t use beer anymore I will start a mutiny with army of moomins

[Moin]

At the moment the shield icons are missing here at Meta.

[Moin]

Fixed

[patrickemin]

Thanks, it’s not clear to me if the upgrade to version 6 has been done or will be done? (I could’nt find the “bluesky” version 6 icon after upgrading my site, it’s why I ask…)

[ondrej]

Once you update your site, your icons will be FA6 and automatically remapped by Discourse.

[patrickemin]

Yes it’s what I expected, but this icon cannot display (I use it in the header icons links component)

[ondrej]

I’ve found the icon on 6.6.0

Font Awesome

As its not a icon used in Discourse, is it in your svg icon subset in site settings?

[patrickemin]

No, I am adding it with this syntax: “fa-bluesky” in the resources of the component, but it’s not sufficient. I’ll look at that svg resources thing, I am not familiar with that.

(update), apparently we are talking about the same thing, yes it is added in the resources…

[awesomerobot (Kris)]

you might need to do fab-bluesky, because it’s part of the brand set

[patrickemin]

Thanks it works specifying fab-bluesky in the svg resources and in the custom header links editor, which I never needed to do before. In the custom header links component, I never specified the prefix “fa”, for the bluesky icon I needed to specify “fab-bluesky”. The main thing is that it works ! Thanks.

[Jagster (Jakke Lehtonen)]

@Jagster

But if I can’t use beer anymore I will start a mutiny with an army of moomins

I upgraded and icons changed. The thing that was bothering me most, because I’m a bit scared of my users (those ladies are wonderful, but if they get upset…) is what happens with reactions, but that is a different world, right? Anyway, everything went smoothly.

[darkpixlz]

Looks like a cool upgrade! I love the updated rounding. Didn’t know it was a change I wanted.

[mattdm (Matthew Miller)]

Most importantly, the new version uses the correct Fedora logo rather than an unauthorized approximation that was giving our designers aneurisms.

[bloomexperiment (Tracey)]

Will the official Category Icons and Tag Icons theme components be updated to use the new Font Awesome 6 names?

Category Icons

Summary Category Icons allows category badge links to have icons next to the category name. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-category-icons New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features This theme component is used alongside the Category Badge Styles theme component H…

Tag Icons

Summary Tag Icons allows tags to have an icon next to the tag label. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/discourse-tag-icons New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Here is an example of how this would look, with tag style set to the default (simple): [image] Here is how this looks with tag sty…

I think they still currently use FA5

[awesomerobot (Kris)]

These theme components use the icon system built into Discourse, so I don’t believe they’ll need an update to be compatible — they should automatically use the new icons.