Where can I find a list of icons used by Discourse?

Product Support

AI-generated summary

Users are seeking a comprehensive list of icons used by Discourse, particularly for customizing or replacing them via plugins or CSS. watchmanmonitor initially referenced a sample plugin replacing icons like d-liked and heart, but noted confusion over naming conventions such as notification.liked_many_2. tshenry pointed to the icon library source, though watchmanmonitor found it incomplete for icons like .d-icon-lock. tshenry clarified that FA icon names (e.g., lock) can be used directly in api.replaceIcon. oshyan echoed the need for a full list and confirmed the source link was broken. ondrej explained that Discourse uses free Font Awesome icons, available at Font Awesome’s gallery, and noted that users can view icons on their site via /styleguide/atoms/icons — if enabled via site settings. pfaffman confirmed this path works on any Discourse forum with the styleguide plugin enabled. oshyan thanked them, acknowledging the usefulness of the links and noting minor difficulties adding specific icons — which they plan to address separately.

1

In the sample “new like icon” repo, we see:

<script type="text/discourse-plugin" version="0.8">
      api.replaceIcon('d-liked', 'thumbs-up');
      api.replaceIcon('d-unliked', 'thumbs-o-up');
      api.replaceIcon('notification.liked', 'thumbs-o-up');
      api.replaceIcon('notification.liked_2', 'thumbs-o-up');
      api.replaceIcon('notification.liked_many', 'thumbs-o-up');
      api.replaceIcon('heart', 'thumbs-up');
</script>

I don’t know that I’d have guessed to replace notification.liked_many_2

Where could we see a list of all the icons in use by discourse?

2

This should be what you are looking for:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse-common/addon/lib/icon-library.js

3

I was trying to replace an icon over in this topic: https://meta.discourse.org/t/how-to-replace-an-icon-using-css/78714/5?u=watchmanmonitor

The icon in question was .d-icon-lock, but I don’t see it in the list above. Where would I find the icon, so I know what to target in the api.replaceIcon above?

4

In this case you would just use the FA icon name:

<script type="text/discourse-plugin" version="0.8">
  api.replaceIcon('lock', 'times-circle');
</script>
5

I see. I guess I was asking for a list of all icons.. perhaps searching the source for {d-icon ' is what I’m looking for.

6

I have the same question, and the link above doesn’t work. I searched and skimmed through a lot of this topic: Introducing Font Awesome 5 and SVG icons
But likewise I don’t see a list to know whether an icon is in the core set or not. Can’t find any other related search results on the forum either.

7

Discourse uses the free font awesome icons. All available icons that can be used are found here. You may have to add some icons to the svg icon subset in the site settings. You can see what icons are on your site by adding /styleguide/atoms/icons to the URL. If this does not appear please check styleguide enabled in site settings.

If you want to access the pro icons you need to install the Discourse FontAwesome Pro plugin.

8

https://meta.discourse.org/styleguide/atoms/icons

You have this on your forum too. You might need to enable the plugin.

9

Thanks @ondrej and @pfaffman ! I was familiar with the use of Font Awesome, and I knew I may need to add some new ones, which is why I wanted to know what was included. The Meta and Styleguide plugin links are both very helpful. Still having a bit of trouble figuring out how to add new ones in some (but oddly not all) cases, but I’ll make a separate topic/reply about that. :wink: