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

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

---

What do I need to do today?

Nothing at all ! Once Discourse is updated, you’ll have the new version of the icons.

Discourse will automatically remap old icon names to new icon names, and the old icons will all be replaced. This includes icons used in the interface by default as well as badges, group/user flair, sidebar items, and additional icons added by themes and plugins.

If there are any outstanding problems which have not been automatically handled, you’ll be notified via error messages in console & server logs.

I’m seeing an error message in the console, how can I find the cause?

1. Open the browser developer tools, and find the relevant message. If there are lots of messages in the console, it may help to type “Missing icon” in the filter.

   

2. Note the current name of the affected icon, and the suggested name to update with.

3. Use the developer tools “search” function (in chrome, that’s cmd/ctrl + shift + p, then “search”) to look for the affected icon name. Ignore any results starting with chunk. or icon-library. You should see a match for a theme/plugin. For example, in this case, it’s discourse-video:

   

4. Update the relevant theme/plugin, 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. For these, the error messages in console/server logs will be useful for figuring out which icons to update.

We don’t want to carry the long list of icon name mappings forever, so we’ll be removing the error level logging as well in start May 2025.

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.